嵌入式iframe子页面与父页面js通信的方法.docxVIP

这篇文章主要介绍了嵌入式 iframe 子页面与父页面 js 通信的方法 ,实例分析了嵌入式 iframe 子页面与父页面 js 通信的常用技巧 ,非常具有实用价值 ,需要的朋友可以参考下 本文实例讲述了嵌入式 iframe 子页面与父页面 js 通信的方法。 分享给大家供大家参考。 具体分析如下： iframe 框架中的页面与主页面之间的通信方式根据 iframe 中 src 属性是同域链接还是跨 域链接，有明显不同的通信方式，同域下的数据交换和 DOM 元素互访就简单的多了，而跨 域的则需要一些巧妙的方式来实现通信。 一、同域下父子页面的通信 父页面 parent.html ： 代码如下 : lt;htmlgt; lt;headgt; lt;script type=text/javascriptgt; function say() { alert(parent.html------gt;Im at parent.html); } function callChild() { //document.frames[myFrame].window.say();// 只适用于 ie 浏览器 myFrame.window.say(); myFrame.window.document.getElementById(button).value= 我变了 ; } lt;/scriptgt; lt;/headgt; lt;bodygt; lt;input type=button value= 调用 child.html 中的函数 say() onclick=callChild()gt; lt;iframe name=myFrame src=child.htmlgt;lt;/iframegt; lt;/bodygt; lt;/htmlgt; 子页面 child.html ： 代码如下 : lt;htmlgt; lt;headgt; lt;script type=text/javascriptgt; function say() { alert(child.html---gt;Im at child.html); } function callParent() { parent.say(); parent.window.document.getElementsByName(myFrame)[0].style.height=100px; } lt;/scriptgt; lt;/headgt; lt;bodygt; lt;input id=button  type=button  value=  调 用  parent.html  中 的  say()  函 数  onclick=callParent()gt; lt;/bodygt; lt;/htmlgt; 方法调用 如上面示例所示父页面调用子页面的方法可通过： FrameName.window.childMethod();( 种方式兼容各种浏览器 ) 子页面调用父页面的方法： parent.window.parentMethod(); DOM 元素访问  这 根据 FrameName.window 得到了子窗口对象之后， 一页面中的 DOM 元素没区别了都可以通过 代码如下 :  再访问其中的  DOM  元素就跟访问同 document.getElementById(),document.getElementsByName()[index] 如： 代码如下 : parent.window.document.getElementsByName(myFrame)[0]; myFrame.window.document.getElementById(button) 其中的 window 都是可以省略的。 注意事项 要确保在 Iframe 加载完成后再进行操作，如果 Iframe 还未加载完成就开始调用里面的 方法或变量，无疑会产生错误。判断 Iframe 是否加载完毕有两种方法： 1.在 Iframe 上用 onload 事件 ; 2.用 document.readyState==complete 来判断 二、跨域父子页面通信方法 如果 iframe 所链接的是外部页面，因为安全机制则不能使用同域名下的通信方式了。 父页面向子页面传递数据 实现的技巧就是利用 location 对象的 hash 值，通过它传递通信数据，我们只需要在 父页面设置 iframe 的 src 后面多加个 #data 字符串（ data 就是你要传递的数据） ，然后在 子 页面 中通过某种方式能即时的获取到这儿 data 就可以了，其实常用的一种方式就是： 在 子页面 中通过 setInt