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. yii2.0 输出url 注册js css文件

    //输出url <a href="<?=  Url::to(['/users/login/login','id'=>5,'mark'=>true]) ?>&qu ...

  2. 剑指offer—第三章高质量代码（数值的整数次方）

    高质量的代码:容错处理能力,规范性,完整性.尽量展示代码的可扩展型和可维护性. 容错处理能力:特别的输入和处理,异常,资源回收. 规范性:清晰的书写,清晰的布局,合理的命名. 完整性:功能测试,边界测 ...

  3. Linux/Unix shell 自动发送AWR report

    观察Oracle数据库性能,Oracle自带的awr 功能为我们提供了一个近乎完美的解决方案,通过awr特性我们可以随时从数据库提取awr报告.不过awrrpt.sql脚本执行时需要我们提供一些交互信 ...

  4. 【转】Undefined symbols for architecture i386:和"_OBJC_CLASS_$_xx", referenced from:问题解决方法

    多个人共同操作同一个项目或拷贝项目时,经常会出现类似这样的问题: Undefined symbols for architecture i386: "_OBJC_CLASS_$_xx文件名& ...

  5. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JAVA多线程二

    Thread.Join() join()函数表示等待当前线程结束,然后返回. public final synchronized void join(long millis) throws Inter ...

  7. Ubuntu14.04LTS安装记录（办公室联想台式机）

    一.用UltraISO制作U盘启动器,被安装的电脑要设置成从U盘启动. 二.傻瓜式安装简体中文版 三.安装更新 sudo apt-get update sudo apt-get upgrade 四.安 ...

  8. C++异常处理assert,throw,exit用法

    常见的几个小细节问题. assert应用: 在现实世界中,我们脑袋时刻都在判断对与错,对的事情我们会继续深入下去,而错的事情我们会马上停止,那么在编程开发中我们如何赋予程序这种判断事物对错的能力呢?其 ...

  9. BITED-Windows8应用开发学习札记之二：Win8应用常用视图设计

    感觉自我表述能力有欠缺,技术也不够硬,所以之后的Windows8应用开发学习札记的文章就偏向于一些我认为较难的地方和重点了多有抱歉. 上节课是入门,这节课就已经开始进行视图设计了. Windows应用 ...

  10. TortoiseGit's Settings

    将鼠标停放在Settings-TortoiseGit窗体上的editbox,checkbox上,有些会弹出有用的提示信息. 2.35.1. General settings: 设定自己偏好的语言,Gi ...