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. java-swing在组件中显示信息

    package com.http; import java.awt.*; import javax.swing.*; public class TestSwing2 { //创建了一个能够绘制的组件 ...

  2. 网页计算器，（类，隐藏域，style=display：block等）

    第一个文件:表单文件 <html> <head><meta http-equiv="content-type" content="text/ ...

  3. Informatica9.6.1在Linux Red Hat 5.8上安装遇到的有关问题整理_4

    4.创建Integration Service后无法启动 1)错误日志: 2)解决办法: 进入Repository Service的属性页面,将其运行模式改成Normal.

  4. Oracle优化器介绍

    Oracle优化器介绍 本文讲述了Oracle优化器的概念.工作原理和使用方法,兼顾了Oracle8i.9i以及最新的10g三个版本.理解本文将有助于您更好的更有效的进行SQL优化工作. RBO优化器 ...

  5. C# 保留2位小数

    1.只要求保留N位不四舍5入 float   f   =   0.55555f;                 int   i   =(int)(f   *   100);             ...

  6. ansibleplaybook的使用

    1.简单格式要求 [root@ansibleserver ansible]# cat nagios.yml --- - hosts: nagiosserver tasks: - name: ensur ...

  7. 【LeetCode】38 - Count and Say

    The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...

  8. MVC弹出子页面向父页面传值

    实现思路是使用js在父子页面间传值 视图一代码,父页面 @{ ViewBag.Title = "Index"; } <script type="text/javas ...

  9. Java正则表达式获取网页所有网址和链接文字

    ;         pos1= urlContent.indexOf(strAreaBegin)+strAreaBegin.length();         pos2=urlContent.inde ...

  10. 精选PSD素材下载周刊【Goodfav PSD 20130720】

    我们每周精选来自Goodfav PSD的免费PSD素材,有兴趣的朋友尤其是做设计工作的,不妨收藏或者下载. 这些现成的PSD素材能给我们一些相关的灵感,从而提高工作的效率. 1.File Upload ...