怎么在html5中实现跨文档消息传输?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
代码如下:
window.addEventListener (“message"、函数(事件){
//处理程序代码
},假);
使用窗口对象的postMessage()方法向其他窗口发送消息,该方法的定义如下:
代码如下:
otherwindow。postMessage(消息、targetOrigin);
该方法使用两个参数:第一个参数为所发送的消息文本,但也可以是任何JavaScript对象(通过JSON转换对象为文本);第二个参数为接收消息的对象窗口的URL地址,可以在URL地址字符串中使用通配符“*”指定全部地址,不过建议使用准确的URL地址.otherwindow为要发送窗口对象的引用,可以通过window.open()方法返回该对象,或通过对window.frames数组指定序号(索引)或名字的方式来返回单个框架所属性的窗口对象。
示例
代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"/比;
& lt; title>跨文档消息传输示例主文档& lt;/title>
& lt;脚本类型=拔谋?javascript"脚本https://www.yisu.com/zixun/src=" http://code.jquery.com/jquery-1.6.4.min.js ">
& lt;脚本类型=拔谋?javascript"比;
$(函数(){
//监听消息事件。
window.addEventListener (“message",函数(事件){
//忽略指定URL之外的页面发送的消息。
如果(事件)。起源!=癶ttp://www.blue-butterfly.net")返回;
警报(event.data);//显示消息。
},假);
$ (“# iframeContent") .load(函数(事件){
//向子页面发送消息
这[0].postMessage (“Hello",“http://www.blue-butterfly.net/test/");
});
});
& lt;/script>
& lt;/head>
& lt; body>
& lt; header>
& lt; h2>跨域通信示例& lt;/h2>
& lt;/header>
& lt; iframe id=癷frameContent"宽度=?00”;https://www.yisu.com/zixun/src=" http://www.blue-butterfly.net/test/">
& lt;/body>
& lt;/html>
子页面中的代码如下:
代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"/比;
& lt;脚本类型=拔谋?javascript"脚本https://www.yisu.com/zixun/src=" http://code.jquery.com/jquery-1.6.4.min.js ">
& lt;脚本类型=拔谋?javascript"比;
$(函数(){
window.addEventListener (“message",函数(事件){
如果(事件。起源!=癶ttp://Lulingniu")返回;
$ (“# console") .append (event.origin) .append(“传来的消息:“).append (event.data);
//向主页面发送消息。
event.source.postMessage(“你好,有:“+。位置,event.origin);
},假);
});
& lt;/script>
& lt;/head>
& lt; body>
& lt; p>这是iframe中的内容。;/p>
& lt; div id=癱onsole"祝辞& lt;/div>
& lt;/body>
& lt;/html>
,公牛,通过对窗口对象的消息事件进行监听,可以接收消息。
,公牛,通过访问消息事件的起源属性,可以获取消息的发送源(本例中主页面的发送源为“http://Lulingniu”,子页面的发送源为“http://www.blue-butterfly.net”)。注意:发送源与网站的URL地址不是一个概念,发送源只包括域名与端口号,为了不接收其他源恶意发送过来的消息,最好对发送源做检查。
,公牛,通过访问消息事件的数据属性,可以取得消息内容(可以是任何JavaScript对象,使用JSON)。
,公牛;使用postMessage()方法发送消息。
,公牛,通过访问消息事件的来源属性,可以获取消息发送源的窗口的代理对象。
看完上述内容,你们掌握怎么在html5中实现跨文档消息传输的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!
