JavaScript使用HTML5的window.postMessage实现跨域通信例子
发布时间:2024-04-10 11:00:41
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多:
1.document.domain+iframe的设置,应用于主域相同而子域不同;
2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限
3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要
在同一客户端就行,跨应用程序, 可以跨域。
window.name 保存数据以及跨域 iframe 静态代理动态传输方案,充分的运用了window.name因为页面的url改变而name不改变的特性。
各种方案网上都有很多实例代码,大家可以自己搜索一下。
html5中最炫酷的API之一:就是 跨文档消息传输Cross Document Messaging。高级浏览器Internet Explorer 8+, chrome,Firefox , Opera 和 Safari 都将支持这个功能。这个功能实现也非常简单主要包括接受信息的”message”事件和发送消息的”postMessage”方法。
发送消息的”postMessage”方法
向外界窗口发送消息:
otherWindow.postMessage(message, targetOrigin);
otherWindow: 指目标窗口,也就是给哪个window发消息,是 window.frames 属性的成员或者由 window.open 方法创建的窗口
参数说明:
1.message: 是要发送的消息,类型为 String、Object (IE8、9 不支持)
2.targetOrigin: 是限定消息接收范围,不限制请使用 ‘*'
接受信息的”message”事件
var onmessage = function (event) {
var data = event.data;
var origin = event.origin;
//do someing
};
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
//for ie
window.attachEvent('onmessage', onmessage);
}
回调函数第一个参数接收 Event 对象,有三个常用属性:
1.data: 消息
2.origin: 消息来源地址
3.source: 源 DOMWindow 对象
当然postmessage也有一些不足的地方:
1.ie8,ie9下传递的数据类型值支持字符串类型,不过可以使用用 JSON对象和字符串之间的相互转换 来解决这个问题;
2.ie6,ie7需要写兼容方案,个人认为window.name比较靠谱;


猜你喜欢
- 1. argparse 模块简介argparse是一个用来解析命令行参数的 Python 库,它是 Python 标准库的一部分。基于 py
- 简洁版Windows10系统下,按Win+R键启动运行,输入cmd,进入命令窗口输入conda info --envs,查看conda 环境
- <script> Array.prototype.swap = function(i, j) { var temp = this
- 本文研究的主要是Django开发中的signal 的相关内容,具体如下。前言在web开发中, 你可能会遇到下面这种场景:在用户完成某个操作后
- 测试语法如下:powered by jb51.netexec GetRecordFromPage news,newsid,10,100000
- 1:数据源Hollywood Movie Dataset: 好莱坞2006-2011数据集实验目的: 实现 统计2006-2011的数据综合
- 代码如下:<% Function Bytes2bStr(vin,cSet) Dim BytesStream,StringReturn
- 常见面试题Vue 如何监控数组defineProperty 真的不能监测数组变化吗?Vue 是如何追踪数据发生变化在 Vue 中当我们把一个
- 1.php in_array方法说明PHP查找数组元素是否存在,一般会使用in_array方法。bool in_array ( mixed
- 我们大致会在下列几种情况下用到: 一、文件操作(FileSystemObject)<%@ IMPORT
- 一、环境设置第一步引入必须的各类包import osimport tkinterimport tkinter.filedialogimpor
- 导语每日游戏更新系列——今天带大家来看看扫雷小游戏!它是许多人接触到的第一款游戏,大概也是广大办公族和无网学生无聊时消遣的最佳游戏。在那些还
- 之前一直用python自带的IDLE写python程序,后来发现有一些限制啥的,于是下载了pycharm作为IDE去处理python新建项目
- 使用python进行程序编写时,经常会使用第三方模块包。这种包我们可以通过python setup install 进行安装后,通过impo
- 废话不多说了,直接给大家贴代码了,具体代码如下所示:<script type="text/javascript"&
- 为了熟悉Python基础语法,学习了一个经典的案例:飞机大战,最后实现效果如下:实现步骤:①下载64位对应python版本的pygame:p
- 本文实例讲述了mysql报错:MySQL server version for the right syntax to use near t
- 上一篇博客写到用javascript生成多组文本,可以让数据的输入不受显示,现在我们需要把这些输入写入数据库,这里就用到json传入。 首先
- 有表如下:如何获得如下结果:解法使用xml转换代码如下: CREATE TABLE body (
- 本文为大家分享了python实现学生管理系统的具体代码,供大家参考,具体内容如下1.0版本学生管理系统''' 1.添