javascript 상위 및 하위 페이지 상호 작용 기술 요약_javascript 기술

Frame은 iframe 또는 프레임셋일 수 있는 하위 페이지를 저장하는 데 사용됩니다. 창 개체는 전역 개체이며 페이지의 모든 기능과 개체는 해당 범위 내에 있습니다.
1. 상위는 상위 창을 나타냅니다. 상위 창에 여러 수준의 중첩이 있는 경우 top은 최상위 상위 창을 나타냅니다.
self는 창 자체를 나타냅니다.

if(self==top){//}判断窗口是否处于顶级 
if(self==parent){}//也可以

2.1. 상위 페이지는 하위 페이지 요소에 액세스합니다. 하위 페이지의 요소는 모두 window.document 개체에 포함되어 있어 먼저 가져와서 이에 대해 이야기하기가 쉽습니다.
가장 편리한 작업은 프레임의 이름 속성을 설정하는 것이 가장 좋습니다.

등

<iframe name="test" src="child.html"></iframe>

child.html에서 ID가 'menu'인 요소를 가져오려면 다음과 같이 작성할 수 있습니다.

window.frames["test"].document.getElementById('menu'); 
//由于所有的函数都存放在window对象里面，可去掉开头的window： 
frames["test"].document.getElementById('menu'); 
//在浏览器中，帧的name属性被默认等同于子页面的window对象，因此可以进一步简写： 
test.document.getElementById('menu');

2.2 상위 페이지는 하위 페이지 기능이나 개체에 액세스합니다. 서브페이지의 기능과 개체는 모두 해당 창 개체에 있습니다. 핵심은 개체를 얻는 것입니다.

//假如child.html定义了showMesg函数，需要在父中调用，则这样写 
window.frames['test'].showMesg(); 
//简写形式 
test.showMesg(); 
//同理，对象也是如此访问 
alert(test.person);

2.3 문서를 얻는 다른 방법.
먼저 'document.getElementById()' 또는 'document.getElementsByTagName()'을 사용하여 프레임을 문서 아래의 요소로 가져온 다음 해당 속성 contentDocument/contentWindow(iframe 및 프레임에만 해당)에 액세스합니다. 첫 번째는 지원되지 않습니다. by ie7-. 두 번째 크롬은 지원되지 않습니다.

<iframe id="testId" src="child.html"></iframe> 
//====== 
var doc=document.getElementById('testId'); 
//或者 
var doc=document.getElementsByTagName('iframe')[0]; 
然后 
var winOrdoc=doc.contentDocument||doc.contentWindow;//二选一 
if(winOrdoc.document)winOrdoc=winOrdoc.document; 
winOrdoc.getElementById('menu'); 
//如果需要window对象，则这样写： 
if(winOrdoc.defaultView)winOrdoc=winOrdoc.defaultView;

3.1 하위 페이지는 상위 페이지 요소에 액세스합니다. 아이디어는 2.1과 동일합니다. 먼저 상위 창 window.document 개체
를 가져옵니다.

parent.window.document.getElementById('parentMenu'); 
//简写 
parent.document.getElementById('parentMenu');

3.2, 하위 페이지는 상위 페이지 기능이나 객체에 접근합니다. 아이디어는 2.2와 동일합니다. 먼저 상위 창 창 개체를 가져옵니다.

parent.parentFunction();

마지막으로 js의 동일 출처 정책에 대해 언급하겠습니다. 즉, 웹사이트 A에 있는 js 코드는 코드가 웹사이트 B에서 시작되더라도 웹사이트 B에 있는 콘텐츠에 액세스할 수 없습니다. 프레임이 다른 웹사이트의 페이지인 경우 위 방법에 따라 서로 액세스할 때 브라우저에 '권한 없음' 오류 메시지가 표시되어야 합니다.