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 ...
随机推荐
- 查看w3wp进程占用的内存及.NET内存泄露,死锁分析
一 基础知识 在分析之前,先上一张图: 从上面可以看到,这个w3wp进程占用了376M内存,启动了54个线程. 在使用windbg查看之前,看到的进程含有 *32 字样,意思是在64位机器上已32位方 ...
- 细说WebSocket - Node篇
在上一篇提高到了 web 通信的各种方式,包括 轮询.长连接 以及各种 HTML5 中提到的手段.本文将详细描述 WebSocket协议 在 web通讯 中的实现. 一.WebSocket 协议 1. ...
- iPhone Anywehre虚拟定位提示“后台服务未启动，请重新安装应用后使用”的解决方法
问题描述: iPhone越狱了,之后在Cydia中安装Anywhere虚拟定位,但是打开app提示:后台服务未启动,请重新安装应用后使用. 程序无法正常使用... 解决方法: 打开Cydia-已安装, ...
- SQLServer事务同步下如何收缩日志
事务同步是SQLServer做读写分离的一种常用的方式. 随着业务数据的不断增长,数据库积攒了大量的日志,为了腾出硬盘空间,需要对数据库日志进行清理 订阅数据库的日志清理 因为订阅数据库所有的数据都来 ...
- nginx的使用
1.nginx的下载 解压后文件目录: 2.nginx的常用命令 nginx -s stop 强制关闭 nginx -s quit 安全关闭 nginx -s reload 改变配置文件的时候,重 ...
- 前端学Markdown
前面的话 我个人理解,Markdown就是一个富文本编辑器语言,类似于sass对于css的功能,Markdown也可以叫做HTML预处理器,只不过它是一门轻量级的标记语言,可以更简单的实现HTML ...
- AFNetworking 3.0 源码解读（十）之 UIActivityIndicatorView/UIRefreshControl/UIImageView + AFNetworking
我们应该看到过很多类似这样的例子:某个控件拥有加载网络图片的能力.但这究竟是怎么做到的呢?看完这篇文章就明白了. 前言 这篇我们会介绍 AFNetworking 中的3个UIKit中的分类.UIAct ...
- ZKWeb网页框架1.1正式发布
发行日志 https://github.com/zkweb-framework/ZKWeb/blob/master/ReleaseNotes/ReleaseNote.1.1.md 主要改动 添加EFC ...
- 漫谈TCP
不得不承认,tcp是一个非常复杂的协议.它包含了RFC793及之后的一些协议.能把tcp的所有方面面面具到地说清楚,本身就是个很复杂的事情.如果再讲得枯燥,那么就会更让人昏昏欲睡了.本文希望能尽量用稍 ...
- 开源 iOS 项目分类索引大全 － 待整理
开源 iOS 项目分类索引大全 GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助 系统基础库 Category/Util sstoolkit 一套Cate ...