H5 Notes：PostMessage Cross-Origin Communication
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的更多相关文章
- H5 Notes：Navigator Geolocation
H5的地理位置API可以帮助我们来获取用户的地理位置,经纬度.海拔等,因此我们可以利用该API做天气应用.地图服务等. Geolocation对象是我们获取地理位置用到的对象. 首先判断浏览器是否支持 ...
- 利用 pyhon 解决 Cross Origin Requests
在学习 ajax 时遇到了一个问题 XMLHttpRequest cannot load file:xxxxxxxx . Cross origin requests are only supporte ...
- 跨域问题：Cross origin requests are only supported for protocol schemes: http...
跨域:Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extensi ...
- Ajax本地跨域问题 Cross origin requests are only supported for HTTP
问题:打开本地html文件时,报错如下 Cross origin requests are only supported for protocol schemes: http, data,chrome ...
- 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 ...
- 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 ...
- 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的问 ...
- 用临时用户数据目录启动Chrome，关闭安全检查等（解决Cross origin requests are only supported for HTTP?）
Cross origin requests are only supported for HTTP? 参考:https://www.zhihu.com/question/20948649 批处理: s ...
- 【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 ...
随机推荐
- Python高手之路【六】python基础之字符串格式化
Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-3101] This ...
- 【.net 深呼吸】序列化中的“引用保留”
假设 K 类中有两个属性/字段的类型相同,并且它们引用的是同一个对象实例,在序列化的默认处理中,会为每个引用单独生成数据. 看看下面两个类. [DataContract] public class 帅 ...
- Android Studio 多个编译环境配置 多渠道打包 APK输出配置
看完这篇你学到什么: 熟悉gradle的构建配置 熟悉代码构建环境的目录结构,你知道的不仅仅是只有src/main 开发.生成环境等等环境可以任意切换打包 多渠道打包 APK输出文件配置 需求 一般我 ...
- 从零开始编写自己的C#框架（28）——建模、架构与框架
文章写到这里,我一直在犹豫是继续写针对中小型框架的设计还是写些框架设计上的进阶方面的内容?对于中小型系统来说,只要将前面的内容进行一下细化,写上二三十章具体开发上的细节,来说明这个通用框架怎么开发的就 ...
- UE4新手引导之下载和安装虚幻4游戏引擎
1) 进入虚幻4的官方主页(https://www.unrealengine.com/) 这里你可以获得关于虚幻4的最新资讯,包括版本更新.博客更新.新闻和商城等.自2015年起,该引擎已经提供免费下 ...
- C# BackgroundWorker 详解
在C#程序中,经常会有一些耗时较长的CPU密集型运算,如果直接在 UI 线程执行这样的运算就会出现UI不响应的问题.解决这类问题的主要途径是使用多线程,启动一个后台线程,把运算操作放在这个后台线程中完 ...
- bzoj3095--数学题
题目大意:给定一个长度为n的整数序列x[i],确定一个二元组(b, k)使得S=Σ(k*i+b- x[i])^2(i∈[0,n-1])最小 看Claris大神的题解就行了.实际上就是用2次二次函数的性 ...
- Atitit.你这些项目不都是模板吗？不是原创 集成和整合的方式大总结
Atitit.你这些项目不都是模板吗?不是原创 集成和整合的方式大总结 1.1. 乔布斯的名言:创新即整合(Creativity is just connecting things).1 1.2. ...
- 如何搭建git服务器
一.前言 现在越来越多的公司用git进行版本控制,不过git是默认是开源的,如果私有的话是需要付费的,如果不想付费自己可以搭建一个git服务器用来版本控制. 二.服务器端操作 1.安装git sudo ...
- 程序员装B指南
一.准备工作 "工欲善其事必先利其器." 1.电脑不一定要配置高,但是双屏是必须的,越大越好,能一个横屏一个竖屏更好.一个用来查资料,一个用来写代码.总之要显得信息量很大,效率很高 ...