postMessage跨域、跨iframe窗口消息传递
文章目录
- 1. 作用
- 2. 语法
- 3. 使用
- 4. 兼容性
- 5. 应用场景
说起postMessage
可能平时大家也不遇到,但是如果遇到问题了,又想不起它,这里记录下防止后面忘记它。
1. 作用
window.postMessage()
方法可以安全地实现Window对象之间的跨域通信
。例如,在一个页面和它生成的弹出窗口之间,或者是页面和嵌入其中的iframe之间。
通常情况下,受浏览器“同源策略”的限制跨域问题一直是个问题,window.postMessage()
提供了一个受控的机制来安全地规避这个限制(如果使用得当的话)。
2. 语法
一般来说,一个窗口可以获得对另一个窗口的引用(例如,通过targetWindow=window.opener
),然后使用targetWindow.postMessage()
在其上派发MessageEvent
。接收窗口随后可根据需要自行处理此事件,传递给window.postMessage()
的参数通过事件对象暴露给接收窗口。
基本语法:
targetWindow.postMessage(message, targetOrigin, [transfer]);
targetWindow
targetWindow
就是接收消息的窗口的引用。 获得该引用的方法包括:
- Window.open
- Window.opener
- HTMLIFrameElement.contentWindow
- Window.parent
- Window.frames +索引值
message
要发送到目标窗口的消息。 数据使用结构化克隆算法进行序列化。 这意味着我们可以将各种各样的数据对象安全地传递到目标窗口,而无需自己对其进行序列化。
targetOrigin
定目标窗口的来源,必须与消息发送目标相一致,可以是字符串或URI。 表示任何目标窗口都可接收,为安全起见,请一定要明确提定接收方的URI。如果为"*"
则都可以接收。
transfer
可选属性。是一串和message
同时传递的Transferable
对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。
3. 使用
postMessage程序
var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('send');
btn.addEventListener('click', function (e) {e.preventDefault();var val = document.getElementById('text').value;receiver.postMessage("Hello "+val+"!", "http://www.xxx.com");
});
接收端
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){if (event.origin !== "http://www.xxx.com")return;
}
event
对象有三个属性,分别是origin
,data
和source
。event.data
表示接收到的消息;event.origin
表示postMessage
的发送来源,包括协议,域名和端口;event.source
表示发送消息的窗口对象的引用; 我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。
4. 兼容性
总体兼容性还是很好的!
5. 应用场景
- 跨域通信(包括GET请求和POST请求)
- WebWorker
- vue项目中使用到了iframe并且需要传递参数
postMessage跨域、跨iframe窗口消息传递相关推荐
- C# -爬虫之WebBrowser跨域跨iframe获取网页源码
前言:这里关键写用WebBrowser跨域跨iframe获取网页源码的部分,本意是要爬取全职高手的有声小说,这类网站特殊,网页上广告大堆,爬起来真麻烦,比如我爬取的网站的mp3源文件下载还需要秘钥的, ...
- 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 页面跨域与iframe通信(Blocked a frame with origin)
项目中有个需求是在前后端分离的情况下,前台页面将后台页面加载在预留的iframe中:但是遇到了iframe和主窗口双滚动条的情况,由此引申出来了问题: 只保留单个滚动条,那么就要让iframe的高度自 ...
- 新手学跨域之iframe
https://segmentfault.com/a/1190000000702539 页面嵌套iframe是比较常见的,比如QQ相关业务页面的登录框一般都是iframe的.使用ifrmae跨域要满足 ...
- html跨域传值,iframe 跨域传参
iframe 跨域传参 2020-08-19 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了iframe 跨域传参,编程之家小编觉得挺不错的,现在分享给大家,也 ...
- html跨域传值,iframe跨域传值踩坑
我在React项目中使用iframe加载angular项目的页面,想要传一串用户信息,由于跨域,采用了HTML5的新方法postMessage(). 花了很多时间,就是传不过去消息,然后angular ...
- ext.ajax.request跨域,跨域Ajax访问header中 x-requested-with丢失
前端调用后端接口,本域情况下,ajax方式调用,request header中包含x-requested-with信息. 跨域情况下,request header中不再包含x-requested-wi ...
- SSO单点登录跨域跨服务器
单点登录系统总结 关于登录 一.登录 1.当用户点击登录的时候,把当前页面的url用参数传递到登录页面 2.用户成功登录,生成token,保存到redis中(service层),key为token,v ...
最新文章
- R语言使用plot函数和lines函数可视化线图(line plot)时、图之间的主要区别是由选项type产生的、type参数常用参数说明、不同type生成的可视化图像对比
- effective C++ 条款 47:使用traits classes表现类型信息
- Dubbo入门(一)
- Amazon Elasticsearch Service 入门实践
- 拼图项目:延期的后果
- git rebase --skip_可冒充git大神的git tips
- python爬虫什么意思-python爬虫可以爬什么
- 《架构探险——从零开始写javaweb框架》.pdf
- 一张图解AlphaGo原理及弱点
- 研发进阶之项目管理(附腾讯内部满分项目管理PPT)
- 多张图片怎么合成一个pdf?
- 硬盘无法访问提示参数错误
- VBS 对IBM Notes的常规操作
- 【初/中级前端面经】中小型公司面试时都会问些什么?
- transition动画无效 iphone6
- Nginx 负载均衡动静分离配置
- vue 打包后 components 组件 样式丢失问题
- 百分点科技“中国国新数据中台”案例入选爱分析国央企数字化报告
- 基于FPGA的4x4矩阵键盘控制器verilog开发实现
- SOC课程——⑤——常见的逻辑门的符号图