扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
怎么在html5中实现跨文档消息传输?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创新互联是一家专业提供鄂托克前企业网站建设,专注与成都网站制作、网站设计、H5网站设计、小程序制作等业务。10年已为鄂托克前众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
代码如下:
window.addEventListener("message", function(event) {
// 处理程序代码
}, false);
使用window对象的postMessage()方法向其他窗口发送消息,该方法的定义如下:
代码如下:
otherwindow.postMessage(message, targetOrigin);
该方法使用两个参数:第一个参数为所发送的消息文本,但也可以是任何JavaScript对象(通过JSON转换对象为文本);第二个参数为接收消息的对象窗口的URL地址,可以在URL地址字符串中使用通配符“*”指定全部地址,不过建议使用准确的URL地址。otherwindow为要发送窗口对象的引用,可以通过window.open()方法返回该对象,或通过对window.frames数组指定序号(index)或名字的方式来返回单个frame所属性的窗口对象。
示例
代码如下:
子页面中的代码如下:
代码如下:
这是iframe中的内容。
•通过对window对象的message事件进行监听,可以接收消息。
•通过访问message事件的origin属性,可以获取消息的发送源(本例中主页面的发送源为“http://Lulingniu”,子页面的发送源为“http://www.blue-butterfly.net”)。注意:发送源与网站的URL地址不是一个概念,发送源只包括域名与端口号,为了不接收其他源恶意发送过来的消息,最好对发送源做检查。
•通过访问message事件的data属性,可以取得消息内容(可以是任何JavaScript对象,使用JSON)。
•使用postMessage()方法发送消息。
•通过访问message事件的source属性,可以获取消息发送源的窗口的代理对象。
看完上述内容,你们掌握怎么在html5中实现跨文档消息传输的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流