iframe中子父页面跨域通讯
在非跨域的情况下，iframe中的子父页面可以很方便的通讯，但是在跨域的情况下，只能通过window.postMessage()方法来向其他页面发送信息，其他页面要通过window.addEventListener()监听事件来接收信息；
#跨域发送信息
#window.postMessage()语法
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow
其他窗口的一个引用，写的是你要通信的window对象。
例如：在iframe中向父窗口传递数据时，可以写成window.parent.postMessage()，window.parent表示父窗口。message
需要传递的数据，字符串或者对象都可以。targetOrigin
表示目标窗口的源，协议+域名+端口号，如果设置为“*”，则表示可以传递给任意窗口。在发送消息的时候，如果目标窗口的协议、域名或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。例如：
window.parent.postMessage('hello world','http://xxx.com:8080/index.html')
只有父窗口是http://xxx.com:8080时才会接受到传递的消息。[transfer]
可选参数。是一串和message 同时传递的 Transferable 对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。我们一般很少用到。
#跨域接收信息
需要监听的事件名为"message"
window.addEventListener('message', function (e) {
console.log(e.data) //e.data为传递过来的数据
console.log(e.origin) //e.origin为调用 postMessage 时消息发送方窗口的 origin（域名、协议和端口）
console.log(e.source) //e.source为对发送消息的窗口对象的引用，可以使用此来在具有不同origin的两个窗口之间建立双向通信
})
#示例Demo
示例功能：跨域情况下，子父页面互发信息并接收。
- 父页面代码：
<body>
<button onClick="sendInfo()">向子窗口发送消息</button>
<iframe id="sonIframe" src="http://192.168.2.235/son.html"></iframe>
<script type="text/javascript">
var info = {
message: "Hello Son!"
};
//发送跨域信息
function sendInfo(){
var sonIframe= document.getElementById("sonIframe");
sonIframe.contentWindow.postMessage(info, '*');
}
//接收跨域信息
window.addEventListener('message', function(e){
alert(e.data.message);
}, false);
</script>
</body>
- 子页面代码
<body>
<button onClick="sendInfo()">向父窗口发送消息</button>
<script type="text/javascript">
var info = {
message: "Hello Parent!"
};
//发送跨域信息
function sendInfo(){
window.parent.postMessage(info, '*');
}
//接收跨域信息
window.addEventListener('message', function(e){
alert(e.data.message);
}, false);
</script>
</body>
iframe中子父页面跨域通讯的更多相关文章
- iframe内嵌页面——跨域通讯
<template> <div class="act-form"> <iframe :src="src" ref=" ...
- iframe跨域通讯
工作中遇到一个问题,IFRAME嵌套了一个外部页面用于统计 统计的JS由我们提供,并且需要提供热点图 一开始就碰到的问题就是 不知道页面高度 需要子页面传回页面高度用于将IFRAME拉升到合适高度 当 ...
- HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- html5跨域通讯之postMessage的用法
转自:http://www.cnblogs.com/wshiqtb/p/3171199.html postMessagePortal.html 页面代码 <!DOCTYPE html> & ...
- XDomainRequest IE8&IE9 cors 跨域通讯的处理方法
版权声明:避免百度一下通片同一篇文章,未经博主允许不得转载.本博客作为笔记使用,正确性请自行验证. https://blog.csdn.net/u014071104/article/detail ...
- iframe调用父页面js函数 方法 元素
在一个页面中添加iframe,但是有时需要与父页面进行通信,传递参数. 网上总结有以下方法: 一.iframe标签中 src属性传参 <iframe src="test.jsp?i ...
- window.postMessage()实现(iframe嵌套页面)跨域消息传递
window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在页面和嵌入其中的iframe之间. 不同页面上的脚本允许彼此访问,当且仅当它们源自的页面共享相同的协议 ...
- iframe嵌套页面 跨域
父级调用iframe方法: document.getElementById("iframe").contentWindow.func(data1,data2...) 子级 ifra ...
- iframe中涉及父子页面跨域问题
什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制.所谓同源是指相同的域名.协议和端口,只要其中一项不同就为跨域. 举几个例子: http:/ ...
随机推荐
- js 浏览器兼容问题及解决办法
JS中出现的兼容性问题的总结 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 我们都知道js通过style不可以获取行外样式,当我们需要获取行 ...
- Speech Super Resolution Generative Adversarial Network
博客作者:凌逆战 博客地址:https://www.cnblogs.com/LXP-Never/p/10874993.html 论文作者:Sefik Emre Eskimez , Kazuhito K ...
- O准备如何苟进复赛圈？华为软挑开挂指南（附赛题预测）
事先声明,这不是华为软挑的软广,我也不是海军. 这篇文章纯粹是心血来潮,原因是去年上传到github的参赛代码,前几天又有两个人star和fork了. 记得star热潮还是去年4月复赛刚结束的那几天, ...
- 【译文连载】 理解Istio服务网格（第三章 流控）
第3章 流控.............................................................................................. ...
- DOM - Document Object Model
Document Object Model
- mysql添加远程权限
mysql -u root -p grant all privileges on *.* to root@'%' identified by "password"; flush p ...
- spark sql 执行计划生成案例
前言 一个SQL从词法解析.语法解析.逻辑执行计划.物理执行计划最终转换为可以执行的RDD,中间经历了很多的步骤和流程.其中词法分析和语法分析均有ANTLR4完成,可以进一步学习ANTLR4的相关知识 ...
- VFP调用API来控制USB摄像头，实现拍照或录像
*--前提:VFP7.0以上;Windows 2K及以上*--控件:AVICAP32.DLL *--定义:一般放到主程序或表单(集)的Load事件中Public WM_CAP_DRIVER_DISCO ...
- post 两种方式 application/x-www-form-urlencoded和multipart/form-data
本次主要涉及 application/x-www-form-urlencoded方式. postman访问方式如图: java代码实现: 首先使用maven作为第三方依赖管理: <depende ...
- bat常用符合和for语句等
一.开头 @echo off(默认是echo on)@echo off执行以后,后面所有的命令均不显示,包括本条命令 二.特殊符号 1. | 命令管道符,echo Y|rd /s c:\abc,通过管 ...