H5中window.postMessage与跨域的示例分析-创新互联
这篇文章主要为大家展示了“H5中window.postMessage与跨域的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“H5中window.postMessage与跨域的示例分析”这篇文章吧。
平顶山网站建设公司创新互联公司,平顶山网站设计制作,有大型网站制作公司丰富经验。已为平顶山近1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱,请找那个售后服务好的平顶山做网站的公司定做!HTML5 window.postMessage API
HTML5 window.postMessage是一个安全的、基于事件的消息API。
postMessage发送消息
在需要发送消息的源窗口调用postMessage方法即可发送消息。
源窗口
源窗口可以是全局的window对象,也可以是以下类型的窗口:
文档窗口中的iframe:
var iframe = document.getElementById('my-iframe'); var win = iframe.documentWindow;
JavaScript打开的弹窗:
var win = window.open();
当前文档窗口的父窗口:
var win = window.parent;
打开当前文档的窗口:
var win = window.opener();
找到源window对象后,即可调用postMessage API向目标窗口发送消息:
``win.postMessage('Hello', 'ttp://jhssdemo.duapp.com/');"
postMessage函数接收两个参数:第一个为将要发送的消息,第二个为源窗口的源。
注:只有当目标窗口的源与postMessage函数中传入的源参数值匹配时,才能接收到消息。
接收postMessage消息
要想接收到之前源窗口通过postMessage发出的消息,只需要在目标窗口注册message事件并绑定事件监听函数,就可以在函数参数中获取消息。
window.onload = function() { var text = document.getElementById('txt'); function receiveMsg(e) { console.log("Got a message!"); console.log("nMessage: " + e.data); console.log("nOrigin: " + e.origin); // console.log("Source: " + e.source); text.innerHTML = "Got a message!
" + "Message: " + e.data + "
Origin: " + e.origin; } if (window.addEventListener) { //为窗口注册message事件,并绑定监听函数 window.addEventListener('message', receiveMsg, false); }else { window.attachEvent('message', receiveMsg); } };
message事件监听函数接收一个参数,Event对象实例,该对象有三个属性:
data 发送的具体消息
origin 发送消息源
source 发送消息窗口的window对象引用
说明
可以将postMessage函数第二个参数设为*,在发送跨域消息时会跳过对发送消息的源的检查。
postMessage只能发送字符串信息。
实例
源窗口
Html5 postMessage
目标窗口win.html
Html5 postMessage The New Window
以上是“H5中window.postMessage与跨域的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站制作公司行业资讯频道!
文章标题:H5中window.postMessage与跨域的示例分析-创新互联
网页网址:http://scyanting.com/article/dsisgs.html