JavaScript postMessage跨域通信

news/2024/7/19 12:59:28 标签: js
这玩意儿很早以前就有了,只是一直没流行起来。但是现在差不多可以用用了,下面这个是国内最新的浏览器市场份额数据 
  可见IE8的普及程度已经很高了,所以不做IE7-的网站也渐渐多起来,是时候使用这些东西了。
  这里说的postMessage是window对象的方法,它有两个参数,第一个是发送的消息,第二个是目标window对象打开页面的协议和域名。postMessage还有另外一个Worker版,这里就不介绍了。下面是一个最简单的postMessage例子,给自身window对象丢去消息。这个例子还没涉及到跨域问题,但是可以很清楚的了解postMessage的用法。
<script>
onmessage=function(e){
  e=e||event;
  document.write("消息:",e.data);
};
postMessage("次碳酸钴","http://127.0.0.1");
</script>

  这个例子中使用的postMessage实际上就是window.postMessage,也就是向window这个对象发送消息。window对象接收到消息后会触发message事件,在这个例子中message事件触发时会把收到的消息输出到文档上,这就是我们看到的结果。postMessage的第二个参数是一个包含协议名称和域名的URL格式字符串(Worker版没有这个参数),你也可以在这个字符中加入具体的路径,这不会影响结果。
  在对自身window对象postMessage的时候,它的功能就和detachEvent(fireEvent)类似,就是触发一个事件而已。postMessage最初的设计是用来与Worker(JavaScript独立子进程)通信的,这本身没有跨域问题,后来被扩展到window对象上,我们就可以跨域使用它做页面间的通信。跨域使用它通常是和IFRAME配合使用的,因为IFRAME可以很容易的获取到其中的window对象,我们就可以对IFRAME中的异域window执行postMessage。下面是例子:
<!--http://127.0.0.1/a.html-->
<iframe id="f" src="http://localhost/b.html"></iframe>
<script>
var f=document.getElementById("f");
f.οnlοad=function(){
  f.contentWindow.postMessage("SB","http://localhost");
}
</script>
<!--http://localhost/b.html-->
<script>
onmessage=function(e){
  e=e||event;
  document.write("我是",e.data);
};
</script>

  其实和之前的例子一样,这个例子中是调用了f.contentWindow的postMessage,你可以理解调用f.contentWindow的postMessage方法来触发f.contentWindow的message事件,就像主动派送一个事件一样,只不过是跨域的而已。
  postMessage的用法是很简单的,但是也有一些麻烦的问题,比如说事件回调。在message事件中由于跨域限制,无法获取这个消息来源的window对象,因此我们无法回送消息,这也是使用这个跨域方法最蛋疼的地方。就因为这个,postMessage在跨域方面上不是主流方法,所以这就作为一个跨域的候补方法吧。到这里使用postMessage跨域相关的东西也说完了,下面是一些相关的文档。
   MSDN postMessage
   MSDN onmessage
   MDN postMessage
   MDN onmessage
js/76.html" />

转载请注明:前端录»JavaScript postMessage跨域通信

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=20-76-2"></script>

http://www.niftyadmin.cn/n/1732461.html

相关文章

HTML中Div、span、label标签的区别

div与span 大家在初学divcss布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它最官方的语义&#xff0c;但是这样的官方语义太让人迷惑&#xff0c;大的结构还 好&#xff0c;但是小的…

关于网页前端的html使用技巧1

条件注释: <!–[if IE 6]> 如果误写成 <!–[if IE6]> &#xff0c;JS程序将出错。 < !–[if IE 6]> ……< ![endif]–> < !–[if lte IE 6]> ……< ![endif]–> Ite&#xff1a;是小于或等于IE6浏览器。 条件注释只能在I…

h5开发部分总结

1、后台返回 status 0 前端响应返回 network error 出现原因&#xff1a;前端没访问到后台服务器 跨域或者是链接服务器失败 解决方法&#xff1a;然后台根据实际情况查看该环境 下的日志查找是否报错或者链接后台服务器 看是更改配置还是更换域名 2、当进行单行的超…

有关javascript:void(0) 的用法

Javascript中void是一个操作符&#xff0c;该操作符指定要计算一个表达式但是不返回值。 void操作费用法格式&#xff1a; 1、javascript:void(expression) 2、javascript:void expression expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是选的&a…

离线检测

开发离线应用的第一步是要知道设备是在线还是离线&#xff0c;html5为此定义了一个navigator.onLine属性&#xff0c;这个属性值为true表示设备能上网&#xff0c;值为false表示设备离线。这个属性的关键是浏览器必须知道设备能否访问网络&#xff0c;从而返回正确的值。实际应…

h5开发充电补习的一些基础知识

这篇文章诞生的背景&#xff1a; 以前做的h5页面比较少&#xff0c;最近接触了好几个移动端项目&#xff0c;虽然都是小项目都是打游击似的写页面&#xff0c;但是还是觉得对整个框架不是很懂的样子。所以为了更好的提升自己的能力&#xff0c;这里记录一些在工作中遇到自己不是…

base64图片转换为file,blob上传及兼容性

// base64 转 files 这是原来的写法 dataURLtoFile(dataURI, fileName) {var arr dataURI.split(,);var byteString atob(arr[1]);var mime arr[0].match(/:(.*?);/)[1];var ab new ArrayBuffer(byteString.length);var ia new Uint8Array(ab);for (var i 0; i < byt…

50个实用的JavaScript工具

JavaScript是一个功能强大的客户端脚本语言&#xff0c;许多现代化的网站和Web应用程序都会使用到它。JavaScript可以增强用户的体验&#xff0c;并提供丰富的互动式组件和功能。虽然它的语法相当简单&#xff0c;但是对开发者来说还是很有难度的&#xff0c;因为它要运行在Web…