Javascript中要实现跨域通信，主要有window.name，jsonp，document.domain，cors等方法。不过在H5中有一种新的方法postMessage可以安全实现跨域通信，并且使用简单。

要使用postMessage，首先得检查浏览器是否支持该方法，postMessage属于window对象，检测方法如下：

if('postMessage' in window){

}else{

    console.log('浏览器不支持postMessage');

}

postMessage使用语法如下所示。

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow必须是一个window对象的引用，如iframe的contentWindow，window.open的返回对象，window.frames[index]等。

targetOrigin指定otherWindow的源，如果目标窗口的协议，主机地址，端口只要一个不同，该方法便不会执行信息发送

为了能接收到postMessage发送的消息，必须在window对象上监听message事件，该事件对象包涵了data（消息）、origin（来源地址）、source（来源窗口代理）等属性，使用如下所示

window.onmessage = function(e){

    if (e.origin === 'http://www.test.zmx.com') {

        alert(e.data);

    }

}

下面是使用postMessage的小例子，帮助理解。

http://www.test.zmx.com/postmessage.html，简称A页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <iframe frameborder="0" src="http://www.select.zmx.com/select.html"></iframe>

    <input type="text" id="kw"><button id="btn">发送到子窗口</button>

    <script type="text/javascript">

        window.onload = function(){

            window.onmessage = function(e) {

                if (e.origin === 'http://www.select.zmx.com') {

                    alert("收到来自子窗口的消息："+e.data);

                }

            }

            btn.onclick = function(e) {

                var val = kw.value;

                window.frames[0].postMessage(val, 'http://www.select.zmx.com');

            }

        }

    </script>

</body>

</html>

http://www.select.zmx.com/select.html，简称B页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>简单下拉框插件</title>

    <link rel="stylesheet" href="simpleSelect.css">

    <style type="text/css">

        body{ padding: 40px; }

    </style>

    <script type="text/javascript" src="jquery-1.9.1.js"></script>

    <script type="text/javascript" src="simpleSelect.js"></script>

</head>

<body>

    <input type="text" id="in1"><button id="btn1">发送到父窗口</button>

    <script>

        window.onmessage = function(e){

            if (e.origin === 'http://www.test.zmx.com') {

                alert("收到来自父窗口的消息："+e.data);

            }

        }

        btn1.onclick = function(e) {

            var val = in1.value;

            window.top.postMessage(val, 'http://www.test.zmx.com');

        }

    </script>

</body>

</html>

在A页面中发送消息hello world给B页面，如下所示。

点击发送，则B页面则收到消息，如下所示。

B页面向A页面发送消息也是一样的，就不叙述了。

H5 Notes：PostMessage Cross-Origin Communication的更多相关文章

  1. H5 Notes：Navigator Geolocation

    H5的地理位置API可以帮助我们来获取用户的地理位置,经纬度.海拔等,因此我们可以利用该API做天气应用.地图服务等. Geolocation对象是我们获取地理位置用到的对象. 首先判断浏览器是否支持 ...

  2. 利用 pyhon 解决 Cross Origin Requests

    在学习 ajax 时遇到了一个问题 XMLHttpRequest cannot load file:xxxxxxxx . Cross origin requests are only supporte ...

  3. 跨域问题：Cross origin requests are only supported for protocol schemes: http...

    跨域:Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extensi ...

  4. Ajax本地跨域问题 Cross origin requests are only supported for HTTP

    问题:打开本地html文件时,报错如下 Cross origin requests are only supported for protocol schemes: http, data,chrome ...

  5. Blocking Cross Origin API request for /api/contents Creating Notebook Failed An error occurred while creating a new notebook.

    anacoda安装的jupyter,使用nginx进行了转发,远程访问可以进去,但是创建文件和创建目录都会报错 浏览器页面报错: 第一次使用jupyter创建python时错误:Creating No ...

  6. jquery读取本地文件，Windows上报错。XMLHttpRequest cannot load xxx. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.k.cors.a.c

    问题: 测试报告,使用本地的json.txt文件,结果文件读取失败,报错如下: XMLHttpRequest cannot load xxx. Cross origin requests are on ...

  7. Cross origin requests are only supported for protocol schemes: http, data, chrome,chrome-extension的问题

    Cross origin requests are only supported for protocol schemes: http, data, chrome,chrome-extension的问 ...

  8. 用临时用户数据目录启动Chrome，关闭安全检查等（解决Cross origin requests are only supported for HTTP?）

    Cross origin requests are only supported for HTTP? 参考:https://www.zhihu.com/question/20948649 批处理: s ...

  9. 【chrome错误】Cross origin requests are only supported for protocol schemes: http, data,chrome-extension, https, chrome-extension-reso

    使用ajax请求本地文件,chrome会报跨域错误. XMLHttpRequest cannot loadfile:///C:/Users/Li/Desktop/images/alist.json.C ...

随机推荐

  1. java: web应用中不经意的内存泄露

    前面有一篇讲解如何在spring mvc web应用中一启动就执行某些逻辑,今天无意发现如果使用不当,很容易引起内存泄露,测试代码如下: 1.定义一个类App package com.cnblogs. ...

  2. 一看就懂的ReactJs入门教程-精华版

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  3. Java初始化过程

    这篇文章主要讲解Java在创建对象的时候,初始化的顺序.主要从以下几个例子中讲解: 继承关系中初始化顺序 初始化块与构造器的顺序 已经加载过的类的初始化顺序 加载父类,会不会加载子类 创建子类对象会不 ...

  4. static，你还敢用吗？(二）

    为了压系统,昨天小组在测试环境模拟了一大批订单数据.今天上午查看记录的账单计息日志,发现了一大堆的MySqlException MySql.Data.MySqlClient.MySqlExceptio ...

  5. App你真的需要么

    随着智能手机.移动路联网的普及,APP火的一塌糊涂,APP应用可谓五花八门,街上经常看到各种推广:扫码安装送东西,送优惠券.仿佛一夜之间一个企业没有自己的APP就跟不上时代了. 有时我在想:APP,你 ...

  6. 基于ASP.NET/C#开发国外支付平台(Paypal)学习心得。

        最近一直在研究Paypal的支付平台,因为本人之前没有接触过接口这一块,新来一家公司比较不清楚流程就要求开发两个支付平台一个是支付宝(这边就不再这篇文章里面赘述了),但还是花了2-3天的时间通 ...

  7. springmvc+bootstrap+jquerymobile完整搭建案例(提供下载地址)

    用一张简单的截图说明下,然后提供一个下载地址. bootstrap的大部分样式官方都是写好的,所以只需要class="官方样式即可",具体可以看官方的案例,下面来个地址 http: ...

  8. BPM生产安全管理解决方案分享

    一.方案概述生产安全管理是企业生产管理的重要组成部分,组织实施好企业安全管理规划.指导.检查和决策,保证生产处于最佳安全状态是安全管理的重要内容和职责.H3 BPM企业生产安全管理解决方案是一套专门为 ...

  9. TFS 2015 敏捷开发实践 – 在Kanban上运行一个Sprint

    前言:在 上一篇 TFS2015敏捷开发实践 中,我们给大家介绍了TFS2015中看板的基本使用和功能,这一篇中我们来看一个具体的场景,如何使用看板来运行一个sprint.Sprint是Scrum对迭 ...

  10. Centos 7.0 安装Mono 3.4 和 Jexus 5.6

    2013-07-26 写过一篇<CentOS 6.3下 安装 Mono 3.2 和Jexus 5.4>,CentOS 7在CentOS 6的基础上有很大的调整,本文是这篇文章的更新,主要介 ...