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比较靠谱;
猜你喜欢
- 在使用aiohttp结合apscheduler的AsyncIOScheduler模拟定点并发的时候遇到两个问题在调度器scheduler.s
- 前言在 JavaWeb 开发中,一般使用 Zxing 来生成和识别二维码,但是,Zxing 的识别有点差强人意,不少相对模糊的二维码识别率很
- 一、SQL注入简介SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编写时的疏忽,通过SQL语句,
- 前言需求是将两个list同时进行遍历,然后同步的将每个元素add到一个dict中,虽然有麻烦的方式,比如直接用list的数组下标可以实现,但
- javascript实现翻页效果:<html> <head> <title>上下翻页看 - aspxho
- 如下所示:list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] slice = random.sample(list
- tensorflow中的conv2有padding=‘SAME'这个参数。吴恩达讲课中说到当padding=(f-1)/2(f为卷积
- 如果你是个赛车手,并且按一下按钮就能够立即更换引擎而不需要把车开到车库里去换,那会是什么感觉呢?MySQL数据库为开发人员所做的就好像是按按
- css usage是一个基于firebug的firefox扩展,可以用来查看页面中的CSS的使用情况,可以清楚的查看css文件中所有的规则在
- 骨骼识别的应用场景如今,当前疫情大环境之下。很多人,因为居家办公或者其他原因闷在家里不能外出健身。那么,借助骨骼识别和卷积神经网络模型,计算
- 什么是事件代理(Event Delegation)?如果不太了解的朋友,可详细阅读:《Event delegation in JavaScr
- 前言当前很多人在闲暇时喜欢听音乐,那么基于这种现象,我也是肝了几个小时完成了基于python的个性化音乐播放器,现在分享给你们。开发组件py
- 如何用下拉列表显示数据库里的内容? 我们来看看实现这个功能的程序:<%Dim objDC, objRSS
- 在讲解 seek() 函数和 tell() 函数之前,首先来了解一下什么是文件指针。我们知道,使用 open() 函数打开文件并读取文件中的
- 本文实例讲述了PHP使用自定义key实现对数据加密解密的方法。分享给大家供大家参考,具体如下:客户端和服务端通信时,有个场景很常见,通过一个
- 阅读对象:知道什么是restful,有了解swagger或者openAPI更佳。1.什么是restfulRepresentional Sta
- Python upper()方法Python 字符串描述Python upper() 方法将字符串中的小写字母转为大写字母。语法upper(
- 导读一篇用PyTorch Lighting提供模型服务的完全指南。纵观机器学习领域,一个主要趋势是专注于将软件工程原理应用于机器学习的项目。
- 前几天帮人调试一个ASP+SQL2000+IIS5.1/6.0的网站程序,调试过程中遇到的问题如下:一、 SQLServer登录 原先存在备
- 一、什么是ttkbootstrap?官方文档 [较慢]:https://ttkbootstrap.readthedocs.io/en/lat