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. Maven与Ant的区别

    相同点: Ant和Maven都是基于Java的构建(build)工具. 理论上来说,有些类似于(Unix)C中的make ,但没有make的缺陷.Ant是软件构建工具,Maven的定位是软件项目管理和 ...

  2. unity, surface shader access world position and localposition

    一,surface shader中访问worldposition 在surface shader中访问世界坐标,只需在Input结构体中声明float3 worldPos即可,如下:  struct  ...

  3. mysql （master/slave）复制原理及配置

    1 复制概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其它主机(slaves)上,并重 ...

  4. 嵌入式 Linux下curl库API简单介绍

    1:CURLcode curl_global_init(long flags); 这个函数全局需要调用一次(多次调用也可以,不过没有必要), 所以这也是把Curlplus设计成单体类的原因,curl_ ...

  5. hdu 4927 java求组合数（大数）

    import java.util.Scanner; import java.math.BigInteger; public class Main { private static int [] a = ...

  6. [转] 接触C# 反射 2

    逆心 原文 反射基础,2013-4. 反射用于在程序运行过程中,获取类里面的信息或发现程序集并运行的一个过程.通过反射可以获得.dll和.exe后缀的程序集里面的信息.使用反射可以看到一个程序集内部的 ...

  7. Android中垃圾回收日志信息

    原因 GC_CONCURRENTfreed 178K, 41% free 3673K/6151K, external 0K/0K, paused 2ms+2msGC_EXPLICITfreed 6K, ...

  8. CAD操作

    1.建立构造线 说签名和图签不在同一条直线上,如何判断两个对向到底是不是在一条线上呢?通过构造线( Construction Line)可以进行判断,CAD中打入: xl 命令,再键入h(horizo ...

  9. Oracle 学习用

    最近在学习Oracle数据库 ,公司用这个,学习到现在,唉!苦逼的程序员呀! 也只能在这里发发牢骚了,这个是转载的 ,发完睡觉! oracle sql语句 一.ORACLE的启动和关闭 .在单机环境下 ...

  10. LINQ标准查询操作符(四) —AsEnumerable,Cast,OfType,ToArray,ToDictionary,ToList,ToLookup,First,Last,ElementAt

    十.转换操作符 转换操作符是用来实现将输入对象的类型转变为序列的功能.名称以“As”开头的转换方法可更改源集合的静态类型但不枚举(延迟加载)此源集合.名称以“To”开头的方法可枚举(即时加载)源集合并 ...