DDR爱好者之家

javascript父、子页面交互技巧总结
站长资源 2025/1/22 佚名
76 1538
DDR爱好者之家 Design By 杰米

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

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

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

<iframe name="test" src="/UploadFiles/2021-04-02/child.html">


假如要获取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 父页面访问子页面函数或对象。子页面的函数和对象都在其window对象里，同上，关键是获取该对象。





//假如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不支持.





<iframe id="testId" src="/UploadFiles/2021-04-02/child.html">


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







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





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





parent.parentFunction();





最后提一下js的同源策略，即位于A网站的js代码不允许访问位于B网站的内容，即使该代码来源于B网站。假如帧是其它网站的页面，那么按上述方法互相访问时，浏览器应该会提示：'没有权限'错误。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米