最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js iframe 父子页面之间的通信做法
时间:2011-07-09 编辑:简简单单 来源:一聚教程网
js iframe 父子页面之间的通信做法
同域下父子页面的通信
父页面 parent.html
子页面 child.html
方法调用
如上面示例所示父页面调用子页面的方法可通过: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所链接的是外部页面,因为安全机制则不能使用同域名下的通信方式了。在《SNS平台与第三方APP的JS通信实现》中提供易于且具有通用性的通信方式。
父页面向子页面传递数据
实现的技巧就是利用 location 对象的 hash 值,通过它传递通信数据,我们只需要在父页面设置 iframe的 src 后面多加个#data 字符串(data就是你要传递的数据),然后在 子页面 中通过某种方式能即时的获取到这儿 data 就可以了,其实常用的一种方式就是:
1. 在 子页面 中通过 setInterval 方法设置定时器, 监听 location.href 的变化即可获得上面的 data 信息
2. 然后 子页面 就能根据这个 data 信息进行相应的逻辑处理。
子页面向父页面传递数据
实现的技巧就是利用一个代理 Iframe C,它嵌入到 子页面中,并且和父页面必须保持是同域,然后我们通过它充分利用上面第一种通信方式的实现原理就能把 子页面的数据传递给 iframeC,接下来的问题就是怎么让iframeC把数据传递给主页面A ,因为,iframeC 和主页面是同域的,所以它们之间传递数据就变得简单多了,属于同域名下的通信问题了,如前面所讨论的,在这里的可以使用一个经常使用的属性 window.top (也可以使用window.parent.parent),它返回对载入浏览器得最顶层 window 对象的引用,这样我们就能直接条用父页面中方法啦。
父窗口调用iframe子窗口方法
myFrame.window.functionName();
iframe子窗口调用父窗口方法
parent.functionName();
父窗口页面
子窗口页面
IFrame问题汇总
取Iframe有两种方式:
1.ifr_id = document.getElementById("ifr"); //取到的是dom结果,主要用于操作property,改变Height,width之类的用这个
2.ifr_window = window.frames["ifr"]; //取到的是文档结果,可以取到文档的内容,如ifr_window.document.body.innerHTML
不同的对象用于不同的场合,注意不要弄混。
方法互调:
父调子:ifr_window.subMethod();
子调父:parent.topMethod();
注意用到的都是window.frames["ifr"]的方式取到的对象。
在Iframe加载完成后再进行操作
如果Iframe还未加载完成就开始调用里面的方法或变量,无疑会产生错误。判断Iframe是否加载完毕有两种方法:
1.在Iframe上用onload事件;
2.用document.readyState=="complete"来判断
跨域
并不是所有情况下父页面都可以操作子页面的。哪些情况下允许互相操作呢?
1.两个页面都是处于同一域名下,如www.111com.net/;
2.两个页面处于同一父域名下,如www.zhutiai.com/和bbs.a.com,这种情况默认是不能互访的,但是通过设置document.domain来让其互访,下面会具体讲到。
如果父页面在a.com下,引用了一个b.com的Iframe,那么父页面的JS不能读取Iframe的结构,这个问题就是跨域。
为什么要禁止这个操作呢?如果可以随意操作的话,我在自己的站点上引用163的页面,然后读取Iframe的cookie,那么163用户cookie里记住的密码就被收集到了。
解决跨域的方法:
1.对于在同一父域名下的,如上面的第二种情况,通过设置document.domain=a.com可让其实现互相访问;
2.对于不在同一父域名下的,但纯用JS是不能实现让其互访的,有一个变通的方法是类似ajax代理,即在a.com下新建一个页面,在server端其访问b.com下面的这个页面,将待访问的这个页面内容输出出来,然后再引用这个新建的页面,就变成在同一域名下了。
自适应高度
自适应高度平时用的较多,这里贴一段代码,兼容目前的各种浏览器
代码
-
上一个: js日期格式判断代码
-
下一个: jquery loading页面加载效果
相关文章
- webpack打包单页面如何引用的js 06-07
- angular.js 路由及页面传参示例 05-03
- 在js代码拼接dom对象到页面上去的模板总结 04-05
- jsp、struts、spring、mybatis实现前端页面功能模块化拆分的方案 01-11
- JS实现的表头列头固定页面功能示例 01-10
- JS调用iframe方式实现Web区域打印页面内容 01-23