프레임 내 js 함수의 상호 호출에 대한 자세한 설명_기본 지식

프레임 간 상호 참조

페이지의 모든 프레임은 창 개체의 속성으로 컬렉션 형식으로 제공됩니다. 예: window.frames는 페이지의 모든 프레임 컬렉션을 나타냅니다. 양식 객체, 링크 객체, 그림 객체 등과 동일합니다. 유사하지만 차이점은 이러한 컬렉션이 문서의 속성이라는 점입니다. 따라서 서브프레임을 참조하려면 다음 구문을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

window.frames["frameName"];
window.frames.frameName
window.frames[index]

그 중 window라는 단어를 self로 바꾸거나 생략할 수도 있으며, 프레임 이름이 페이지의 첫 번째 프레임이라고 가정하면 다음 작성 방법은 동일합니다.

코드 복사 코드는 다음과 같습니다.

self.frames["frameName"]
자체 .frames[0]
프레임[0]
프레임 이름

각 프레임은 HTML 페이지에 해당하므로 이 프레임은 창의 모든 속성도 갖습니다. 소위 프레임 참조도 창 개체에 대한 참조입니다. 이 창 개체를 사용하면 window.document 개체를 사용하여 페이지에 데이터를 쓰거나 window.location 속성을 사용하여 프레임의 페이지를 변경하는 등 페이지를 쉽게 조작할 수 있습니다.
다음은 다양한 수준의 프레임워크 간의 상호 참조를 소개합니다.

1． 상위 프레임에서 하위 프레임으로 참조
위의 원칙을 알면 상위 프레임에서 하위 프레임을 참조하는 것이 매우 쉽습니다. 즉,

코드 복사 코드는 다음과 같습니다.

window.frames["frameName"];

이는 페이지 내에서 frameName이라는 하위 프레임을 참조합니다. 서브프레임 내의 서브프레임을 참조하려는 경우 참조된 프레임(실제로는 창 객체)의 특성에 따라 다음과 같이 구현할 수 있습니다.

복사 code 코드는 다음과 같습니다.

window.frames["frameName"].frames["frameName2"];

이러한 방식으로 두 번째 수준 하위 프레임이 참조되며 다층 프레임워크의 참조를 실현할 수 있습니다.

2． 하위 프레임에서 상위 프레임으로의 참조
각 창 객체에는 상위 프레임을 나타내는 상위 속성이 있습니다. 프레임이 이미 최상위 프레임인 경우 window.parent는 프레임 자체도 나타냅니다.

3． 형제 프레임 간 참조
두 프레임이 동일한 프레임의 하위 프레임인 경우 형제 프레임이라고 하며 상위 프레임을 통해 서로 참조할 수 있습니다. 예를 들어 페이지에는 2개의 하위 프레임이 포함됩니다.

코드 복사 코드는 다음과 같습니다.

< 프레임 src="1.html" name="frame1" />
 

frame1에서 다음 명령문을 사용하여 프레임2를 참조할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

self.parent.frames["frame2"];

4． 서로 다른 수준의 프레임워크 간 상호 참조
프레임워크의 수준은 최상위 프레임워크에 대한 것입니다. 레벨이 다른 경우 현재 레벨과 다른 프레임의 레벨 및 이름을 알고 있는 한 프레임에서 참조하는 창 개체의 속성을 사용하여 서로 쉽게 액세스할 수 있습니다. 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

self.parent.frames["childName"]. 프레임["targetFrameName"];

5． 최상위 프레임
에 대한 참조는 상위 속성과 유사합니다. 창 개체에도 top 속성이 있습니다. 이는 프레임 자체가 최상위 프레임인지 여부를 결정하는 데 사용할 수 있는 최상위 프레임에 대한 참조를 나타냅니다. 예를 들면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

//이 프레임이 상단인지 확인 -레벨 프레임
if(self==top){
//dosomething
}

프레임의 로딩 페이지 변경
프레임에 대한 참조는 창 개체에 대한 참조입니다. 창 개체의 위치 속성을 사용하면 프레임의 탐색을 변경할 수 있습니다.
window.frames[0].location= "1.html";
이 속성을 사용하면 페이지의 첫 번째 프레임 페이지가 1.html로 리디렉션됩니다. 하나의 링크를 사용하여 여러 프레임을 업데이트할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

 
 


링크< ;/a>

다른 프레임워크에서 JavaScript 변수 및 함수 참조
다른 프레임워크에서 JavaScript 변수 및 함수를 참조하는 기술을 소개하기 전에 다음 코드를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

이 코드를 실행하면 hello() 함수를 실행한 결과인 "hello, ajax!" 창이 뜹니다. 그렇다면 왜 hello()가 window 객체의 메서드가 되었습니까? 페이지 내에 정의된 모든 전역 변수와 전역 함수는 창 개체의 구성원이기 때문입니다. 예:

코드 복사 코드는 다음과 같습니다.

var a=1;
alert(window.a);

는 1을 보여주는 대화 상자를 표시합니다. 창 개체를 통해 변수와 함수를 호출하여 서로 다른 프레임워크 간에 변수와 함수를 공유하는 경우에도 동일한 원칙이 적용됩니다.
예를 들어, 제품 검색 페이지는 두 개의 하위 프레임으로 구성됩니다. 왼쪽은 사용자가 카테고리 링크를 클릭하면 오른쪽에 해당 제품 목록이 표시됩니다. 상품 옆의 [구매] 링크를 클릭하세요. 장바구니에 상품을 추가하세요.
이 예에서는 왼쪽 탐색 페이지를 사용하여 사용자가 구매하려는 제품을 저장할 수 있습니다. 사용자가 탐색 링크를 클릭하면 다른 페이지, 즉 제품 표시 페이지가 변경되고 탐색 페이지 자체는 변경되기 때문입니다. 변경되지 않은 상태로 유지되므로 그 안의 JavaScript 변수는 손실되지 않으며 전역 데이터를 저장하는 데 사용할 수 있습니다. 구현 원리는 다음과 같습니다.
왼쪽 페이지가 link.html이고 오른쪽 페이지가 show.html이라고 가정합니다. 페이지 구조는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
 

show.html에 표시된 제품 옆에 다음과 같은 문구를 추가할 수 있습니다.
Add to Shopping Che
여기서 link는 탐색 프레임을 나타냅니다. arrOrders 배열은 제품 ID를 저장하기 위해 link.html 페이지에 정의되어 있습니다. addToOrders() 함수는 클릭 이벤트에 응답하는 데 사용됩니다. 제품 옆에 있는 [구매] 링크의 It 수신된 매개변수 id는 해당 제품의 ID를 나타냅니다. 예에서는 ID가 32068인 제품입니다.

코드 복사 코드는 다음과 같습니다.

이런 방식으로 arrOrders를 사용하면 결제 페이지나 장바구니에서 모든 제품을 구매할 수 있도록 준비할 수 있습니다. 탐색 페이지.
프레임워크는 페이지를 독립적인 기능을 가진 여러 모듈로 나눌 수 있습니다. 각 모듈은 서로 독립적이지만 창 개체의 참조를 통해 연결될 수 있습니다. 웹 개발에 있어서 중요한 메커니즘입니다.