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:/ ...
随机推荐
- TensorFlow相关博客
Tensor官方教程 极客学院TensorFlow中文文档 xf__mao的博客
- Go语言实现：【剑指offer】求1+2+3+...+n
该题目来源于牛客网<剑指offer>专题. 求1+2+3+-+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). Go ...
- C++用rand()和srand()生成随机数
内容来自<编程实战宝典> 首先来看函数原型 int rand(void); void srand(unsigned int seed); 1.rand()函数不需要任何参数,直接返回一个随 ...
- Window10和Ubuntu 18.04双系统安装的引导问题解决
作为码农 首先,建议了解下grub2的启动顺序和逻辑.可以参考这篇文章,grub.cfg详解. 从执行顺序倒推,如下如果全部执行成功,则会进入grub的启动菜单:如果最后一步,没有找到grub.cfg ...
- Hession矩阵（整理）
二阶偏导数矩阵也就所谓的赫氏矩阵(Hessian matrix). 一元函数就是二阶导,多元函数就是二阶偏导组成的矩阵. 求向量函数最小值时用的,矩阵正定是最小值存在的充分条件. 经济学中常常遇到求最 ...
- Python - os.walk()详细使用
os.walk() 方法简单介绍 主要用来遍历一个目录内各个子目录和子文件 是一个简单易用的文件.目录遍历器,可以帮助我们高效的处理文件.目录方面的事情. 方法参数介绍 os.walk(top[, t ...
- 推荐算法之因子分解机(FM)
在这篇文章我们将介绍因式分解机模型(FM),为行文方便后文均以FM表示.FM模型结合了支持向量机与因子分解模型的优点,并且能够用了回归.二分类以及排序任务,速度快,是推荐算法中召回与排序的利器.FM算 ...
- pytorch之 sava_reload_model
import torch import matplotlib.pyplot as plt # torch.manual_seed(1) # reproducible # fake data x = t ...
- java 子线程定时去更改主线程的变量
在一次代码编写场景,需要post一些数据,同时携带获得的token,(但是token的有效时间是7200s),但是post需要很多次,很长时间,不可能2小时候中断程序,手动去获取token,这样效率太 ...
- 持续化运维 DevOps
DevOps(Development和Operations的组合词)是一组过程.方法与系统的统称,用于促进开发(应用程序/软件工程).技术运营和质量保障(QA)部门之间的沟通.协作与整 ...