javascript父、子页面交互小结

文章分类:Web前端      帧用来存放子页面，既可以是iframe,又可以是frameset。window对象是全局对象，页面上的一切函数和对象都在它的作用域里。 

    1、parent代表父窗口、如果父窗口又存在若干层嵌套，则top代表顶级父窗口。 
self代表窗口自身。 

Java代码

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

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

     2.1、 父页面访问子页面元素。思路是子页面的元素都在其window.document对象里面，先获取它然后就好说了。 
     帧最好设置name属性，这样操作最方便。如 

Java代码

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

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

假如要获取child.html里面id为'menu'的元素，则可以这样写： 

Java代码

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

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

     2.2 父页面访问子页面函数或对象。子页面的函数和对象都在其window对象里，同上，关键是获取该对象。 

Java代码

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

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

     2.3 其他获取document的方式。 
先使用'document.getElementById()'或'document.getElementsByTagName()'把帧作为 document下的Element获取，然后访问其属性contentDocument/contentWindow (iframe、frame特有),其中第一个ie7-不支持，第二个chrome不支持. 

Java代码

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

<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对象. 

Java代码

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

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

     3.2,子页面访问父页面函数或对象。思路同2.2，先获取父窗口window对象。 

Java代码

1. parent.parentFunction();  

parent.parentFunction();