跨iframe通信方案
来源:互联网 发布:java attribute用法 编辑:程序博客网 时间:2024/05/01 13:24
当在一个页面中,有通过iframe嵌入的新的window时,如果想实现两个window之间的通信,会可能涉及到跨域的问题,直接访问肯定是被禁止的。使用postMessage就可以安全的绕过这些限制,实现通信。
本文通过一个简单的demo,演示下postMessage如何使用,以及其中要注意的几个问题。
参数parameters
message
需要发出的信息,类型为string 对象或者其他
targetOrigin
协议+主机+端口号,作为信息接收端的URL值,只有window的域名和端口号完全和此匹配的时候,信息才能发出去。如果将此值设为*
,表示任意域名的window都能接收到此消息,但是出于安全考虑,通常不建议这么做
关于postMessage方法的调用者,需要注意的是:
调用者为需要接收消息的window对象,也就说谁调用该方法,谁就接收信息。
- window.open()方法返回对该window对象的引用
- 当使用iframe时,通过iframe的
contentWindow
属性获取该iframe的window的引用。
targetWindow.postMessage('Hello World!', 'http://example.com');
事件监听函数
当postMessage
方法被成功调用的时候,在接收端会触发一个MessageEvent, 可以提前绑定一个事件监听函数,在接收到信息时,做相应的处理
//给信息接收端的window绑定事件监听window.addEventListener('message', function(e) { var message = e.data;//e.data可以访问到传递来的数据信息数据});
关于参数e
e.data
发送的数据信息e.source
发送消息的窗口对象e.origin
发送消息窗口的源(协议+主机+端口号)
0 0
- 跨iframe通信方案
- iframe跨域通信方案
- iframe跨域通信
- iframe跨域通信
- iframe跨域通信
- iframe跨域通信
- IFRAME实现跨域通信
- iframe 通信和跨域通信
- iframe通信
- iframe跨域通信的通用解决方案
- iframe跨域通信的通用解决方案
- iframe跨域通信的通用解决方案
- 通过iframe实现跨域通信
- iframe跨域通信的通用解决方案
- iframe跨域通信--html5.postmessage
- iframe跨域通信封装详解
- 使用 <Iframe>实现跨域通信
- 跨语言通信方案比较
- poj 3259 Wormholes
- N个有序整数数列已放在一维数组中,利用二分查找法查找整数m在数组中的位置,若找到,则输出其下标值;反之,则输出 “Not be found”
- Elasticsearch创建索引和映射结构详解
- 排序算法1——冒泡排序
- 基础练习 字符串对比
- 跨iframe通信方案
- 文件上传
- ElasticSearch什么是文档?索引一个文档
- CSS3特效之翻转
- Python NLTK Downloader raise LookupError(resource_not_found) 自然语言处理
- 那些强悍的PHP一句话后门
- Mac通过Docker部署Gitlab实践
- 小程序数据请求注意事项
- winform发布出错