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. LA 2995 Image Is Everything 立方体成像 World Final 2004

    有一个 n * n * n 的立方体,其中一些单位立方体已经缺失(剩下部分不一定连通).每个单位立方体重 1 克,且被涂上单一的颜色(即 6 个面的一颜色相同).给出前.左.后.右.顶.底 6 个视图 ...

  2. Android下EditText的hint的一种显示效果------FloatLabelLayout

    效果: 此为EditText的一种细节,平时可能用的不多,但是用户体验蛮好的,特别是当注册页面的项目很多的时候,加上这种效果,体验更好 仅以此记录,仅供学习参考. 参考地址:https://gist. ...

  3. 通过反射执行get、set方法

    Class clazz = sourceObj.getClass(); 1.获取所有属性 BeanInfo beanInfo = Introspector.getBeanInfo(clazz); Pr ...

  4. JQuery Mobile实现手机新闻浏览器（2）

    在上一篇文章中,已经讨论了程序的结构和页面的布局,并简单介绍了一些jQuery Mobile的使用技巧.在本篇文章中,笔者将继续完成我们web应用的新闻浏览器的设计. 程序的启动 我们现在来研究一下程 ...

  5. hbm.xml支持的类型

  6. IOS-多视图控制器之间的切换

    1. 创建个单视图应用程序 2. 在向Main.storyboard中拖一个ViewController控制器 3. 在第一个viewController中添加一个按钮 4. 按着control键,推 ...

  7. 答 “SOA会不会造成IT黑洞？”

    [文/ 任英杰] 随意间看到支点网的“SOA会不会造成IT黑洞”一文,作者对SOA的认识颇有以偏概全之嫌,写点自己的感想,作为应和吧. 作者的二个对SOA的观点有些偏颇:“SOA就是一种系统集成,它是 ...

  8. C语言练习：第二大整数

    问题描述 编写一个程序,读入一组整数(不超过20个),当用户输入0时,表示输入结束.然后程序将从这组整数中,把第二大的那个整数找出来,并把它打印出来.说明:(1)0表示输入结束,它本身并不计入这组整数 ...

  9. ubuntu下Qt cannot find -lGL错误的解决方法 （转载）

    在ubuntu下使用Qt 编译时候遇上了cannot find -lGL错误,使用命令 sudo apt-get install libqt4-dev或者sudo apt-get install li ...

  10. bzoj3717: [PA2014]Pakowanie

    Time Limit: 90 Sec Memory Limit: 256 MBSubmit: 128 Solved: 43[Submit][Status][Discuss]Description 你有 ...