프레임워크 간 참조
페이지의 모든 프레임은 컬렉션 형태로 창 개체의 속성으로 제공됩니다. 예: window.frames는 페이지의 모든 프레임 컬렉션을 나타냅니다. 이는 양식 개체, 링크 개체, 그림 개체 등과 유사합니다. ., 그러나 차이점은 이러한 컬렉션이 문서의 속성이라는 것입니다. 따라서 서브프레임을 참조하려면 다음 구문을 사용할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
window.frames["프레임이름"];
window.frames.frame이름
window.frames[색인]
그중에서 window라는 단어는 self로 대체되거나 생략될 수도 있습니다. 프레임 이름이 페이지의 첫 번째 프레임이라고 가정하면 다음 작성 방법은 동일합니다.
다음과 같이 코드 코드를 복사합니다.
self.frames["프레임이름"]
자체.프레임[0]
프레임[0]
프레임이름
각 프레임은 HTML 페이지에 해당하므로 이 프레임은 창의 모든 속성을 갖습니다. 소위 프레임 참조는 창 개체에 대한 참조입니다. 이 창 개체를 사용하면 window.document 개체를 사용하여 페이지에 데이터를 쓰거나 window.location 속성을 사용하여 프레임의 페이지를 변경하는 등 페이지를 쉽게 조작할 수 있습니다.
다음은 다양한 수준의 프레임워크 간의 상호 참조를 소개합니다.
1. 상위 프레임에서 하위 프레임으로의 참조
위의 원칙을 알면 상위 프레임에서 하위 프레임을 참조하는 것이 매우 쉽습니다. 즉, 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
window.frames["프레임이름"];
이는 페이지 내에서 frameName이라는 하위 프레임을 참조합니다. 서브프레임 내에서 서브프레임을 참조하려는 경우 참조된 프레임(실제로 창 개체)의 특성에 따라 다음과 같이 구현할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
window.frames["frameName"].frames["frameName2"];
이러한 방식으로 두 번째 수준 서브프레임이 참조되고, 비유적으로 다층 프레임워크의 참조가 달성될 수 있습니다.
2. 하위 프레임에서 상위 프레임으로의 참조
각 창 개체에는 상위 프레임을 나타내는 상위 속성이 있습니다. 프레임이 이미 최상위 프레임인 경우 window.parent는 프레임 자체도 나타냅니다.
3． 형제 프레임 간의 참조
두 프레임이 동일한 프레임의 하위 프레임인 경우 형제 프레임이라고 하며 상위 프레임을 통해 서로 참조할 수 있습니다. 예를 들어 페이지에는 두 개의 하위 프레임이 포함됩니다.
다음과 같이 코드 코드를 복사합니다.
<프레임 세트 행="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</프레임세트>
프레임1에서 다음 명령문을 사용하여 프레임2를 참조할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
self.parent.frames["frame2"];
4. 다양한 수준의 프레임워크 간 상호 참조
프레임워크의 수준은 최상위 프레임워크에 대한 것입니다. 레벨이 다른 경우 현재 있는 레벨과 다른 프레임의 레벨 및 이름을 알고 있는 한 프레임에서 참조하는 창 개체의 속성을 사용하여 서로 쉽게 액세스할 수 있습니다. 예를 들면 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
self.parent.frames["childName"].frames["targetFrameName"];
5. 최상위 프레임에 대한 참조
parent 속성과 유사하게 window 객체에도 top 속성이 있습니다. 이는 프레임 자체가 최상위 프레임인지 여부를 결정하는 데 사용할 수 있는 최상위 프레임에 대한 참조를 나타냅니다. 예를 들면 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
//이 프레임이 최상위 프레임인지 확인
if(self==상단){
//뭔가를 한다
}
프레임의 로딩 페이지 변경
프레임에 대한 참조는 창 개체에 대한 참조입니다. 창 개체의 위치 속성을 사용하면 다음과 같이 프레임 탐색을 변경할 수 있습니다.
window.frames[0].location="1.html";
이렇게 하면 페이지의 첫 번째 프레임 페이지가 1.html로 리디렉션됩니다. 이 속성을 활용하면 하나의 링크를 사용하여 여러 프레임을 업데이트할 수도 있습니다.
다음과 같이 코드 코드를 복사합니다.
<프레임 세트 행="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</프레임세트>
<!--somecode-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">링크</a>
<!--somecode-->
다른 프레임워크 내에서 JavaScript 변수 및 함수 참조
다른 프레임워크에서 JavaScript 변수 및 함수를 참조하는 기술을 소개하기 전에 다음 코드를 살펴보겠습니다.
다음과 같이 코드 코드를 복사합니다.
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
<!--
함수 안녕하세요(){
Alert("안녕하세요, 아약스!");
}
window.hello();
//-->
</script>
이 코드를 실행하면 hello() 함수를 실행한 결과인 "hello, ajax!" 창이 팝업됩니다. 그렇다면 왜 hello()가 window 객체의 메서드가 되었습니까? 페이지 내에 정의된 모든 전역 변수와 전역 함수는 창 개체의 구성원이기 때문입니다. 예를 들어:
다음과 같이 코드 코드를 복사합니다.
var a=1;
경고(window.a);
1을 표시하는 대화 상자가 나타납니다. 창 개체를 통해 호출하여 서로 다른 프레임워크 간에 변수와 함수를 공유하는 경우에도 동일한 원칙이 적용됩니다.
예를 들어, 제품 검색 페이지는 두 개의 하위 프레임으로 구성됩니다. 왼쪽은 사용자가 카테고리 링크를 클릭하면 해당 제품 목록이 오른쪽에 표시됩니다. 구매] 링크를 클릭하시면 해당 상품 장바구니를 추가하실 수 있습니다.
이 예에서는 왼쪽 탐색 페이지를 사용하여 사용자가 구매하려는 제품을 저장할 수 있습니다. 사용자가 탐색 링크를 클릭하면 다른 페이지, 즉 제품 표시 페이지와 탐색 페이지 자체가 변경되기 때문입니다. 변경되지 않은 상태로 유지되므로 JavaScript 변수는 손실되지 않으며 전역 데이터를 저장하는 데 사용할 수 있습니다. 그 구현 원리는 다음과 같습니다.
왼쪽 페이지가 link.html이고 오른쪽 페이지가 show.html이라고 가정합니다. 페이지 구조는 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<머리>
<title> 새 문서 </title>
</head>
<프레임셋 cols="20%,80%">
<frame src="link.html" name="link" />
<frame src="show.html" name="show" />
</프레임세트>
</html>
show.html에 표시된 제품 옆에 다음과 같은 설명을 추가할 수 있습니다.
<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">장바구니에 추가</a>
그 중 link는 탐색 프레임워크를 나타냅니다. arrOrders 배열은 link.html 페이지에 정의되어 상품 ID를 저장합니다. addToOrders() 함수는 옆에 있는 [Purchase] 링크의 클릭 이벤트에 응답하는 데 사용됩니다. product. 수신되는 매개변수 id는 제품의 ID를 나타냅니다. 예는 ID가 32068인 제품입니다.
다음과 같이 코드 코드를 복사합니다.
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
<!--
var arrOrders=새 배열();
함수 addToOrders(id){
arrOrders.push(id);
}
//-->
</script>
이러한 방식으로 결제 페이지나 장바구니 탐색 페이지에서 arrOrders를 사용하여 모든 제품을 구매할 수 있도록 준비할 수 있습니다.
프레임워크는 페이지를 독립적인 기능을 가진 여러 모듈로 나눌 수 있으며, 각 모듈은 서로 독립적이지만 창 개체의 참조를 통해 연결될 수 있습니다. 이는 웹 개발에 있어서 중요한 메커니즘입니다.