使用window.postMessage实现跨域通信
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多:
- document.domain+iframe的设置,应用于主域相同而子域不同;
- 利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限
- 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 方法创建的窗口
参数说明:
- message: 是要发送的消息,类型为 String、Object (IE8、9 不支持)
- 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 iewindow.attachEvent('onmessage', onmessage);}
回调函数第一个参数接收 Event 对象,有三个常用属性:
- data: 消息
- origin: 消息来源地址
- source: 源 DOMWindow 对象
看一个简单的来自网上的demo:http://www.css88.com/demo/postmessage/
- ie8,ie9下传递的数据类型值支持字符串类型,不过可以使用用JSON对象和字符串之间的相互转换来解决这个问题;
- ie6,ie7需要写兼容方案,个人认为window.name比较靠谱;
参考网址:
http://js8.in/752.html
http://www.36ria.com/3890
http://www.planeart.cn/?post_type=post&p=1620
声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《使用window.postMessage实现跨域通信》
使用window.postMessage实现跨域通信相关推荐
- ifrme嵌入外部页面,在外部页面调用本页面方法,window.postMessage实现跨域通信
项目场景:vue页面开发的系统要继承外部系统页面,并且在外部系统页面调用本系统的方法,这样来看的话肯定会存在跨域的问题,而且直接调用方法的话,也不太安全,后来了解到window.postMessage ...
- window.postMessage - 前端跨域通信
window.postMessage - 前端跨域通信 window.postMessage() 语法 The dispatched event 安全问题 示例 注意 HTMLIFrameElemen ...
- 页面嵌套iframe(window.postMessage()实现跨域通信)
项目中的需求 需要外接一个iframe与主页面之间需要通信 的情况 在iframe 中: 在主页面中: window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚 ...
- 服务端转发html页面,html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
说起来挺简单的,可以直接去查询postMessage推送和window.addEventListener接收使用方式,能自己搞明白是最好的,本文章也只是记录一下自己的使用方式 使用postMessag ...
- vue页面内嵌iframe使用postMessage进行跨域通信
跨域 关于跨域的详细资料:跨域,这里只需要明确什么情况下跨域了(等同于两个url什么情况下是非同源关系). 协议.域名.端口三者有其一不同,就算是跨域,就算是非同源 本地环境模拟 借助phpstudy ...
- [乐意黎转载]Window.postMessage() HTML5 跨域解决方案
Hey,everybody~ 又是倒霉的跨域 T T , 有多少人死在了"说出你知道的跨域解决方案,越多越好?"这个面试问题上. 今天和大家说说,HTML5提供的一个跨域解决方案, ...
- H5跨域通信 - window.postMessage
一.简介 window.postMessage is a method for safely enabling cross-origin communication. Normally, script ...
- html5跨域通信之postMessage
html5跨域通信之postMessage的用法 不同域名下的文档因为安全问题,不允许相互之间文档的访问,但是有的时候却不得不需要这样的操作.因此我们一般可以采用 window.name,hash,或 ...
- [转]html5: postMessage解决跨域和跨页面通信的问题
[转]html5: postMessage解决跨域和跨页面通信的问题 参考文章: (1)[转]html5: postMessage解决跨域和跨页面通信的问题 (2)https://www.cnblog ...
最新文章
- 博士申请 | 香港中文大学王思博助理教授招收图表示学习方向全奖博士生
- 术,路,心:陈天桥的大脑行旅
- c++ qt工作量和移动端相比_学习笔记 --- QT
- SRS前需求双向追溯解决方法
- 利用GBDT模型构造新特征具体方法
- Guns 下载、导入、运行_入门试炼01
- 安装python3-dev_linux安装python3
- git log 日期格式
- 尚学堂第二章作业题答案
- 数据安全法整理学习笔记
- 相对标准偏差用计算机,公路工程用计算器计算相对标准偏差(RSD)
- 联想计算机怎么开启网络共享,联想笔记本开启Wi-Fi共享图文教程
- 麻将432牌型听牌判断流程图
- 文件服务 FTP Server
- 用python开发微信公众平台聊天机器人
- Flan-T5: One Model for ALL Tasks
- pdf压缩工具_18MB秒变1MB,最好用的PDF在线压缩工具
- Python:王者荣耀壁纸爬取
- html4.0.1兼容ie7,CSS 完美兼容IE6/IE7/FF的通用hack方法
- 选择排序——C语言代码
热门文章
- matlab数值过小为0,MATLAB数值计算——0
- 什么是字节码,采用字节码的好处是什么
- kakfa中的ISR解释
- java Class对象返回的都是指向同一个java堆地址上的Class引用
- sentinel的@SentinelResource注解使用
- jvm配置参数,查看大对象直接分配到老年代
- 项目管理基础:软件生命周期概念介绍
- 盘点15个不起眼但非常强大的 Vim 命令
- 程序默认在副屏显示_聊一款性价比极高的电竞显示器
- mysql符合安可要求吗,安可是什么意思?演唱太过精彩,粉丝要求返场(再唱一个)...