iframe跨域通信封装详解
2015-09-09 16:44
381 查看
iframe跨域通信
众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容。
用法举例:
需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中希望通过点击一个按钮,调用top页面的一个js方法。
1. 在top页面中建立方法供内部页面使用
复制代码代码如下:
function testFun (text) {
alert(text);
}
2. 在http://www.demo.org/top.html中嵌入iframe
复制代码代码如下:
<iframe width="320" height="240" src="http://www.iframe.com/iframe.html"></iframe>
3. 建立www.demo.org域下建立一个代理页面http://www.demo.org/proxy.html用于跨域通信使用
4. 在http://www.demo.org/proxy.html加入用于代理页面的逻辑
5. 在http://www.iframe.com/iframe.html页面中通过js配置代理页面地址
复制代码代码如下:
TopProxyConfig = {url:'http://www.demo.org/proxy.html'};
6. 通过kissy加载通信模块
复制代码代码如下:
KISSY.use('topproxy', function(S, TopProxy){
//执行代码
});
7. 在http://www.iframe.com/iframe.html通过TopProxy.call直接访问http://www.demo.org/top.html中的方法,如
?
其中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传递信息的目的
源引:http://www.jb51.net/article/70939.htm
众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容。
用法举例:
需求是在http://www.demo.org/top.html中通过iframe方式嵌入http://www.iframe.com/iframe.html,而在iframe页面中希望通过点击一个按钮,调用top页面的一个js方法。
1. 在top页面中建立方法供内部页面使用
复制代码代码如下:
function testFun (text) {
alert(text);
}
2. 在http://www.demo.org/top.html中嵌入iframe
复制代码代码如下:
<iframe width="320" height="240" src="http://www.iframe.com/iframe.html"></iframe>
3. 建立www.demo.org域下建立一个代理页面http://www.demo.org/proxy.html用于跨域通信使用
4. 在http://www.demo.org/proxy.html加入用于代理页面的逻辑
5. 在http://www.iframe.com/iframe.html页面中通过js配置代理页面地址
复制代码代码如下:
TopProxyConfig = {url:'http://www.demo.org/proxy.html'};
6. 通过kissy加载通信模块
复制代码代码如下:
KISSY.use('topproxy', function(S, TopProxy){
//执行代码
});
7. 在http://www.iframe.com/iframe.html通过TopProxy.call直接访问http://www.demo.org/top.html中的方法,如
?
注:
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传递信息的目的
源引:http://www.jb51.net/article/70939.htm
相关文章推荐
- VS2010常用插件介绍之Javascript插件
- 添加Battery相关信息节点(Framework, Hal层)
- sass的用法小结(四)进阶篇
- 配置WifiConfiguration
- 开源项目分析之-Volley
- Android 帧动画 圆形进度条
- 【OpenGL】顶点变换常用函数总结
- Fragment+ViewPager 滑动时 onResume和onPause
- 解决dyld: Library not loaded: @rpath/libswiftCore.dylib
- Eclipse4.4 安装java反编译插件Eclipse Class Decompiler
- Appium源码项目的目录结构分析
- SQLSever之E-R模型
- OFDM之Viterbi译码器原理
- hdu2476 String painter
- 程序中的exit(1)、abort()、assert(0);
- DXF文件中将多段线凸度转换成圆弧
- C++中的友元 friend
- Class.forName
- 常用的几个提高iOS开发效率的开源类库及工具
- 题目10 统计同成绩学生人数