window.postMessage()实现(iframe嵌套页面)跨域消息传递
window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如,在页面和嵌入其中的iframe之间。
发送消息的基本语法:
targetWindow.postMessage(message, targetOrigin, [transfer]);
targetWindow就是接收消息的窗口的引用。 获得该引用的方法包括:
- Window.open
- Window.opener
- HTMLIFrameElement.contentWindow
- Window.parent
- Window.frames +索引值
message就是要发送到目标窗口的消息。 数据使用结构化克隆算法进行序列化。 这意味着我们可以将各种各样的数据对象安全地传递到目标窗口,而无需自己对其进行序列化。
targetOrigin就是指定目标窗口的来源,必须与消息发送目标相一致,可以是字符串“*”或URI。 *表示任何目标窗口都可接收,为安全起见,请一定要明确提定接收方的URI。
transfer是可选参数
接收端:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
if (event.origin !== "http://127.0.0.1:3808/")
return;
}
完整示例:
1、父页面
<title>father</title>
</head>
<body>
<div style="width: 200px;float: left;margin-right: 200px;border: 1px solid #333;">
<div id="color"> frame color</div>
</div>
<div>
<iframe id="child" src="http://127.0.0.1:3808/iframe-son/index.html"></iframe>
</div>
<script>
window.onload = function() {
// 初始化div颜色
window.frames[0].postMessage('getcolor', 'http://127.0.0.1:3808/');
} window.addEventListener('message',function(e) {
// 监听子页面颜色的改变即发送的消息,设置div颜色
var color = e.data;
document.getElementById('color').style.backgroundColor = color;
},false)
</script>
</body>
</html>
2、子页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>son</title>
</head>
<body>
<div id="container" onclick="changeColor();" style="width: 100%; height: 100%;background-color: rgb(204,102,0)">
click to change color
</div> <script>
var container = document.getElementById('container'); //监听父页面传递过来的信息
window.addEventListener('message', function (e) {
if(e.source != window.parent) return ;
// container.innerHTML = e.data var color = container.style.backgroundColor;
window.parent.postMessage(color,'*');
},false) //改变颜色的方法
function changeColor() {
var color = container.style.backgroundColor;
if(color=='rgb(204, 102, 0)'){
color='rgb(204, 204, 0)';
}else{
color='rgb(204,102,0)';
}
container.style.backgroundColor = color;
// 给父元素发送消息
window.parent.postMessage(color,'*');
}
</script>
</body>
</html>
window.postMessage()实现(iframe嵌套页面)跨域消息传递的更多相关文章
- iframe嵌套页面 跨域
父级调用iframe方法: document.getElementById("iframe").contentWindow.func(data1,data2...) 子级 ifra ...
- window.postMessage 在iframe父子页面数据传输
介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage window.postMessage 发送方 接收方 示例 ...
- window.postMessage()实现跨域消息传递
window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https), 端口号(443为https的默认值), ...
- easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法。$('#win').window()
easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...
- window.opener方法的使用 js跨域
原文:window.opener方法的使用 js跨域 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.open文件打开一个lo ...
- 通过Html5的postMessage和onMessage方法实现跨域跨文档请求访问
在项目中有应用到不同的子项目,通过不同的二级域名实现相互调用功能.其中一个功能是将播放器作为单独的二级域名的请求接口,其他项目必须根据该二级域名调用播放器.最近需要实现视频播放完毕后的事件触发,调用父 ...
- easyui 中iframe嵌套页面,提示弹窗遮罩的解决方法,parent.$.messager.alert和parent.$.messager.confirm
项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签.在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由 ...
- 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)
在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...
- iframe中涉及父子页面跨域问题
什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制.所谓同源是指相同的域名.协议和端口,只要其中一项不同就为跨域. 举几个例子: http:/ ...
随机推荐
- MFC加载osg模型
创建MFC单文档项目, OSGObject.h #pragma once #include <osgViewer\Viewer> #include <osgDB\ReadFile&g ...
- 编译Flink 1.9.0
闲来无事,编个Flink 1.9 玩玩 1.下载flink.flink-shaded 源码.解压 flink flink-shaded 7.0 [venn@venn release]$ ll tota ...
- Python - Django - 模板语言之变量
前言: 在 Django 模板语言中变量用 {{ }},逻辑用 {% %} 在 urls.py 中添加对应关系 from django.conf.urls import url from django ...
- php程序无法记录log情况下可尝试下面方法记录log
error_reporting(E_ERROR | E_PARSE); function shutdownCallback(){ $arrError = error_get_last(); // ...
- 使用docker搭建FastDFS文件系统
1.首先下载FastDFS文件系统的docker镜像 docker search fastdfs 2.使用docker镜像构建tracker容器(跟踪服务器,起到调度的作用): docker run ...
- Jupyter notbook 修改默认路径
打开 cmd 输入命令 jupyter notebook --generate-config 2.打开配置文件 3.修改路径 转自: https://blog.csdn.net/zw__chen ...
- spark kmer计算
输入文件:fa格式的文件 输出结果:kmer的频数和对应的kmer类型和计数 1.将fq.gz的文件转换成fa文件: #!/usr/bin/python env # -*- coding:utf-8 ...
- ROS安装,配置
ROS最好安装在Ubuntu系统,因为ROS目前在其他的系统中都是试验性的 ! <Learning ROS for Robotics Programming-- second Edition&g ...
- webpack to package typescript & scss
Demo2操作手册 本Demo演示如何配合各种loader进行稍复杂的使用 准备环境 初始化环境, cd到demo目录之后, 执行如下命令: npm init -y npm install webpa ...
- idea 默认全局配置maven,避免每次新建项目都需要指定自己的maven目录
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_28624243/article/details/84199937 File->Oth ...