iframe跨域通信封装详解
网络编程 2021-07-04 21:48www.168986.cn编程入门
由于前端javascript对跨域访问做了安全限制,所以javascript只能访问与包含它的文档在同一域名下的内容,接下来,长沙网络推广通过此篇文章给大家介绍iframe跨域通信的封装,需要的朋友可以参考下
iframe跨域通信
众所周知,由于前端javascript对跨域访问做了安全限制,javascript只能访问与包含它的文档在同一域下的内容。
用法举例:
需求是在中通过iframe方式嵌入,而在iframe页面中希望通过点击一个按钮,调用页面的一个js方法。
1. 在页面中建立方法供内部页面使用
代码如下:
function testFun (text) {
alert(text);
}
2. 在中嵌入iframe
代码如下:
<iframe width="320" height="240" src="http://.iframe./iframe.html"></iframe>
3. 建立域下建立一个代理页面用于跨域通信使用
4. 在加入用于代理页面的逻辑
5. 在页面中通过js配置代理页面地址
代码如下:
TopProxyConfig = {url:'http://.demo./proxy.html'};
6. 通过kissy加载通信模块
代码如下:
KISSY.use('proxy', function(S, TopProxy){
//执行代码
});
7. 在通过TopProxy.call直接访问中的方法,如
KISSY.use('proxy', function(S, TopProxy){ TopProxy.call('testFun', '这是一个真实的故事'); });
其中call方法的第一个参数是外部网页的全局方法名,支持“.”,后面参数无限个,均传到目标方法里去。
注:
1. 调用后可能不会立即执行,会等到iframe加载完毕后才触发,如果想预加载可以提前执行一个没用的方法。
2. 如果不设置TopProxyConfig,那么会认为引用iframe和父iframe同域(大域)并直接调用对象。
3. 在IE678下可能直接调用中的系统方法会报错,由于系统方法不支持apply。
原理:
A页面嵌日的iframe页面B,其中B想调用A的方法并传递数据,那么可在B中嵌入A页面同域下的一个iframe页面C,C可以通过window.访问到A的window。那么在B中可以改变C的href的hash向C传递一些信息,然后C再把这些信息传递给A,从而间接达到B给A传递信息的目的
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程