嵌入式iframe子页和网页JS之间通信的方法
的页面和基于iframe的src属性域的iframe框架网页之间的通信手段是相同的链接或跨域通信链路,有明显的不同,同一个域的数据交换和DOM交换元素变得简单多了,和跨域需要一些聪明的方法来实现通信。
1。Pater和同一个域中的子页面之间的对应关系
父页面parent.html:
复制代码代码如下所示:
函数表示(){
警报(父目录>我在父目录下);
}
callchild()函数
{
/ /文档。帧{ }。window.say(myFrame); / /只适用于IE浏览器
MyFrame.window.say();
MyFrame.window.document.getElementById(按钮)。值=我改变了;
}
将child.html:
复制代码代码如下所示:
函数表示()
{
警报();
}
功能callparent(){
Parent.say();
parent.window.document.getelementsbyname(myFrame){ 0 }。风格。高度=100px ;
}
方法调用
调用子页面的方法,如上面的例子所示,可以这样做:FrameName.window.childMethod();(这种方式是与各种浏览器兼容)
对于孩子的页面调用父页面的方法:parent.window.parentmethod();
DOM元素的访问
根据framename.window获得的子窗口对象,然后访问DOM元素和DOM元素访问同一页面之间没有区别,可以复制代码代码如下:(文件。getElementById({ }),document.getelementsbyname指标)如:复制代码如下:parent.window.document.getelementsbyname(myFrame. ){ 0 };
MyFrame.window.document.getElementById(按钮)可以在所有的窗口略。
注意事项
确保操作iframe加载完成后,如果iframe尚未加载,它会调用方法或变量里面,会有一个错误。有两种方法来判断是否iframe加载。
1。使用iframe的onload事件;
2。使用文档。发生=完整的判断
二、跨域父子页通信方法
如果iframe链接外部网页,因为安全机制不能用同一个域名通信。
父页传递子页的数据。
诀窍是使用位置哈希,通过它传输数据的通信,我们只需要在一个#数据串父页面设置iframe(你要传输的数据),并以某种方式在这里得到即时可以在子页面的数据,事实上常用的方式是:
1。在子页面,通过setInterval方法设置定时器,听location.href变化获取数据信息
2。然后,子页面上可以根据数据信息。
子页面将数据传递给父页面。
诀窍是使用代理iframe C,它是嵌入到子页面,和父页面必须保持相同的域,通过它我们可以充分利用的原则可以遍历数据页上面的第一个通信方式传递给iframec,接下来的问题是如何将数据传递到iframec首页,因为iframec和主页是同一个域,所以他们之间传递的数据变得简单多了,沟通的问题属于同一个域名,如前面所讨论的,在这里你可以使用window.top属性(通常也可以使用窗口。母。母),它返回一个引用顶层窗口对象包括在浏览器,所以我们可以直接与父页面的方法。
希望本文能对大家的javascript程序设计有所帮助。