zoukankan      html  css  js  c++  java
  • javascript父、子页面交互小结

       帧用来存放子页面,既可以是iframe,又可以是frameset。window对象是全局对象,页面上的一切函数和对象都在它的作用域里。 
        1、parent代表父窗口、如果父窗口又存在若干层嵌套,则top代表顶级父窗口。 
    self代表窗口自身。 

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


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

    Java代码  收藏代码
    1. <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');  

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

    Java代码  收藏代码
    1. //假如child.html定义了showMesg函数,需要在父中调用,则这样写  
    2. window.frames['test'].showMesg();  
    3. //简写形式  
    4. test.showMesg();  
    5. //同理,对象也是如此访问  
    6. 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;  

         3.1子页面访问父页面元素。思路同2.1,先获取父窗口window.document对象. 

    Java代码  收藏代码
    1. parent.window.document.getElementById('parentMenu');  
    2. //简写  
    3. parent.document.getElementById('parentMenu');  


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

    Java代码  收藏代码
    1. parent.parentFunction();  


       最后提一下js的同源策略,即位于A网站的js代码不允许访问位于B网站的内容,即使该代码来源于B网站。假如帧是其它网站的页面,那么按上述方法互相访问时,浏览器应该会提示:'没有权限'错误。

  • 相关阅读:
    第05组 Alpha冲刺(2/4)
    Alpha冲刺(1/4)
    第04组 Beta冲刺(4/4)
    第04组 Beta冲刺(3/4)
    第04组 Beta冲刺(2/4)
    第04组 Beta冲刺(1)
    第04组 Alpha事后诸葛亮
    第04组 Alpha冲刺(4/4)
    第04组 Alpha冲刺(3/4)
    第04组 Alpha冲刺(2/4)
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3853079.html
Copyright © 2011-2022 走看看