JavaScript 跨域方式实现方式有很多，之前，一篇文章中提到了 JSONP 形式实现跨域。本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage 。

 1 otherWindow.postMessage(message, targetOrigin);

 2

 3 otherWindow

 4 其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

 5

 6 message

 7 将要发送到其他 window的数据。将会被结构化克隆算法序列化。这意味着你可不受什么限制的安全传送数据对象给目标窗口而无需自己序列化。

 8

 9 targetOrigin

10 该参数可设置为 *，将无域名限制。也可指定特定的域名，比如：http://www.jj.com

11

12 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

本文还是以 iframe 为例，一个 html 页面中套有一个 iframe 文档，不过，iframe 文档 src 属性与 html 页面不同域，因此，两者之间便形成跨域。

index.html _http://localhost:3127/index.htm

<!DOCTYPE html >

<html >

<head>

    <title></title>

</head>

<body >

   <input type="text"  id="val"/>

    <input type="button" id="btn" value="测试" /><br/>

    <iframe src="http://localhost:10528/index.html" > </iframe>

    <script type="text/javascript">

        window.onload = function () {
            // 首先，给按钮绑定 click 事件

            if (window.addEventListener)

                document.getElementById('btn').addEventListener('click', sendMsg, false);

            else

                document.getElementById('btn').attachEvent("onclick", sendMsg);

        };


        // 获取 iframe 标签，利用 postMessage 跨域通信，值为 input text 标签值

        function sendMsg() {

         document.getElementsByTagName('iframe')[0].contentWindow.postMessage(document.getElementById('val').value,"*");

        }

    </script>

</body>

</html>

 index.html (iframe) _http://localhost:10528/index.html

<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body >

   <b>我是另一个跨中 iframe 文档</b>

    <script type="text/javascript">

        // 给 iframe 文档绑定 message 事件

        window.onload = function () {

            if (window.addEventListener)

                window.addEventListener('message', getMessage, false);

            else

                window.attachEvent("onmessage", getMessage);

        };


       // iframe 触发 message 事件时，调用 getMessage 函数

        function getMessage(event) {

            console.dir(event);

            alert(event.data);

        }

    </script>

</body>

</html>

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

JavaScript 跨域：window.postMessage 实现跨域通信的更多相关文章

  1. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  2. 使用window.postMessage实现跨域通信

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...

  3. 利用HTML5的window.postMessage实现跨域通信

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77   HTML5的window.postMessage简述 postM ...

  4. window.postMessage()实现跨域消息传递

    window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https), 端口号(443为https的默认值), ...

  5. window.postMessage实现网页间通信

    window.postMessage() 方法可以安全地实现跨域通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以 ...

  6. js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)

    一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限 ...

  7. (二)文档请求不同源之window.postMessage跨域

    一.基本原理 HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging).这个API为window对象新增了一个window.postMessage方法,允许跨 ...

  8. 跨域通信--Window.postMessage()

    一.跨源通信概述 源:协议.端口号(https默认值433).主机域名(document.domain) 作用:向目标窗口派发MessageEvent消息(四个属性) 兼容参考 MessageEven ...

  9. HTML5之worker开启JS多线程模式及window.postMessage跨域

    worker概述 worker基本使用 window下的postMessage worker多线程的应用 一.worker概述 web worker实际上是开启js异步执行的一种方式.在html5之前 ...

随机推荐

  1. SQL Server 2008 序列号

    SQL Server 2008 序列号:Developer: PTTFM-X467G-P7RH2-3Q6CG-4DMYBEnterprise:   JD8Y6-HQG69-P9H84-XDTPG-34 ...

  2. APP打包上线应注意的问题！

    咱们只谈技术不谈业务!关系到怎么推广怎么让软件发扬光大,其实归根结底这都和公司的现状和产品经理有直接的联系,与我们程序员关系不太密切.   我总结的上线项目和我做的项目以及公司外包过来的项目升级再次发 ...

  3. webstorm查看angular2的ts源码

    1.shift双击 双击shift就可以查找文件或函数了,速度更快更方便. 2.ng_for.ts

  4. RequireJS入门指导 （转）

    最近在百度实习做的一个项目用到了 Require JS 这个库,之前从来没有了解过,经过一番大概的搜索后找到一篇非常不错的文章,看完后能够让你对 Require JS 的运行机制.使用方法以及为什么使 ...

  5. （win+linux）双系统，删除linux系统的条件下，删除grub引导记录，恢复windows引导

    //(hdx,y) (显示查找到的分区号)第一个数字指第几个硬盘,第二个指第几个分区.   一般我们是(hd0,0) \n Linux的分区已经被你从Windows中删除,系统启动后停在“grub&g ...

  6. android操作文件

    Android中读取/写入文件的方法,与Java中的I/O是一样的,提供了openFileInput()和openFileOutput()方法来读取设备上的文件.但是在默认状态下,文件是不能在不同的程 ...

  7. ScrollView中嵌套ListView

    scrollview中嵌入listview,要是直接把listview嵌进scrollview中,listview的高度是固定的不能进行滑动.默认情况下Android是禁止在ScrollView中放入 ...

  8. JAVA 锁

    JAVA 锁 锁的概念 Java中的锁是控制资源访问的一种方式.它弥补了synchronized的可操作性不强的不足. Java的锁都实现了Lock接口.Lock结构定义了锁的基本操作. 函数 解释 ...

  9. 10分钟搞定react-router

    1.路由的安装: $ npm install -S react-router 2.引入路由文件 import {Router, Route, browserHistory} from 'react-r ...

  10. Wiki动画回顾系列序&&目录

    嘛,前前后后看了太多动画,我自己一直想做的事也是喜欢能做一款acg相关的应用,但一直没有好的点子,当然纠结到最后还是需要一个比较好的社区来让大家加入进来.一直有人让我给他们推番,而我也慢慢懂得“人心” ...