当前位置：首页 > 资讯 > 技术文档

iframe跨域通信封装详解

时间：2021-06-14 12:21 编辑：来源：阅读：
扫一扫，手机访问

摘要：iframe跨域通信封装详解

[b]iframe跨域通信[/b] [url=http://demo.jb51.net/js/2015/iframeDomain/crossDomain.html]查看演示[/url] [url=http://xiazai.jb51.net/201508/yuanma/iframeDomain.rar]源码下载[/url] 众所周知，由于前端javascript对跨域访问做了安全限制，javascript只能访问与包含它的文档在同一域下的内容。用法举例：需求是在[url=http://www.demo.org/top.html]http://www.demo.org/top.html[/url]中通过iframe方式嵌入[url=http://www.iframe.com/iframe.html]http://www.iframe.com/iframe.html[/url]，而在iframe页面中希望通过点击一个按钮，调用top页面的一个js方法。 1. 在top页面中建立方法供内部页面使用

[url=http://www.demo.org/top.html]http://www.demo.org/top.html[/url]中嵌入iframe

[url=http://www.demo.org/]www.demo.org[/url]域下建立一个代理页面[url=http://www.demo.org/proxy.html]http://www.demo.org/proxy.html[/url]用于跨域通信使用 4. 在[url=http://www.demo.org/proxy.html]http://www.demo.org/proxy.html[/url]加入用于代理页面的逻辑 5. 在[url=http://www.iframe.com/iframe.html]http://www.iframe.com/iframe.html[/url]页面中通过js配置代理页面地址

[url=http://www.iframe.com/iframe.html]http://www.iframe.com/iframe.html[/url]通过TopProxy.call直接访问[url=http://www.demo.org/top.html]http://www.demo.org/top.html[/url]中的方法，如

KISSY.use('topproxy', function(S, TopProxy){
 TopProxy.call('testFun', '这是一个真实的故事');
});

其中call方法的第一个参数是外部网页的全局方法名，支持“.”，后面参数无限个，均传到目标方法里去。注： 1. 调用后可能不会立即执行，会等到iframe加载完毕后才触发，如果想预加载可以提前执行一个没用的方法。 2. 如果不设置TopProxyConfig，那么会认为引用iframe和父iframe同域（大域）并直接调用top对象。 3. 在IE678下可能直接调用top中的系统方法会报错，由于系统方法不支持apply。原理： A页面嵌日的iframe页面B，其中B想调用A的方法并传递数据，那么可在B中嵌入A页面同域下的一个iframe页面C，C可以通过window.top访问到A的window。那么在B中可以改变C的href的hash向C传递一些信息，然后C再把这些信息传递给A，从而间接达到B给A传递信息的目的

全部评论(0)

上一篇：ThinkPHP表单自动提交验证实例教程
下一篇：jQuery中innerWidth()方法用法实例

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部