html5 window.postMessage 传递数据的使用
window.postMessage（图片介绍）：
发送方（图片介绍）：
接收方（图片介绍）：
个人测试一（iframe）：
发送方，地址为：http://localhost:63342/HelloHBuilder/html2/postmessage.html?_ijt=cdirh338ca9a8sbhrjg5ti9odk ，页面内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>postmessage</title>
</head>
<body>
<h1>iframe:</h1>
<iframe id="iframe" src="http://localhost:63342/HelloHBuilder/html2/onmessage.html" style="width: 100%; height: 300px;"></iframe>
<input id="msg" type="text" placeholder="请输入要发送的消息">
<button id="send">发送</button> <script>
window.onload =function() {
document.getElementById('send').onclick = function() {
var msg = document.getElementById('msg').value;
var iframeWindow = document.getElementById('iframe').contentWindow;
iframeWindow.postMessage(msg, "http://localhost:63342/HelloHBuilder/html2/onmessage.html");
}
}
</script>
</body>
</html>
接收方：地址为：http://localhost:63342/HelloHBuilder/html2/onmessage.html?_ijt=bis6jq7vbn70k1vfeoeqbbb83n，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onmessage</title>
</head>
<body>
<div>
<h2>target.html,以下是接收到的消息：</h2>
<p id="msg"></p>
</div>
<script>
window.onload = function() {
if(window.addEventListener){
window.addEventListener("message", handleMessage, false);
}
else{
window.attachEvent("onmessage", handleMessage);
} function handleMessage(event) {
event = event || window.event;
if (event.origin === 'http://localhost:63342') {
document.getElementById('msg').innerHTML = event.data;
}
}
}
</script>
</body>
</html>
实验结果，在页面发送message后，内嵌的iframe可以接收到参数。当发送方和接收方在浏览器的不同Tab标签页时，接收方无法接收message.
个人测试二（window.open）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>postMessage</title>
</head>
<body>
<script>
window.onload = function () {
var popup = window.open('http://localhost:63342/HelloHBuilder/html2/postMessage(window_open)/onMessage.html?_ijt=s34sf7dgctrlurfdubbn9i3ibg'); popup.onload = function () { //必须要有onload
// 假设当前页面没有改变location，这条语句会成功添加message到发送队列中去（targetOrigin设置对了）
popup.postMessage("hello there!", "http://localhost:63342/HelloHBuilder/html2/postMessage(window_open)/onMessage.html?_ijt=s34sf7dgctrlurfdubbn9i3ibg"); function receiveMessage(event) {
if (event.origin !== "http://localhost:63342") {
return;
}
console.log(event.data);
}
window.addEventListener("message", receiveMessage, false);
}
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>on message</title>
</head>
<body>
<h1>this is a new tab, crate by <code>window.open()</code></h1> <script>
document.onreadystatechange = function(e) {
if (document.readyState === 'complete') {
window.addEventListener('message', receiveMessage, false);
}
}; function receiveMessage(event) {
if (event.origin !== "http://localhost:63342") {
return;
}
console.log('message', event.data);
console.log('origin', event.source);
document.write(event.data); // 假设你已经验证了所受到信息的origin (任何时候你都应该这样做), 一个很方便的方式就是把enent.source
// 作为回信的对象，并且把event.origin作为targetOrigin
event.source.postMessage("hi there yourself! the secret response " + "is: rheeeeet!", event.origin);
}
</script>
</body>
</html>
注：子视窗必须要在父窗口的onload事件执行之前添加message事件监听。
参考：https://www.cnblogs.com/milo-xie/p/6569017.html https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage https://www.cnblogs.com/MarcoHan/p/5245519.html
html5 window.postMessage 传递数据的使用的更多相关文章
- H5中用postMessage传递数据，解决localStorage不能跨域问题
localStorage不能跨域,所以在A域名下用localStorage.YourKey方式存储的值,在B域名下是不能取到的. 所以需要转变思路,目前主要使用的两种方式: 一种方式:在A.B两个页面 ...
- HTML5中window.postMessage，在两个页面之间的数据传递
HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览 关于postMessage window.postMessage虽然说是html5的功 ...
- 用HTML5里的window.postMessage在两个网页间传递数据
说明 window.postMessage()方法可以安全地实现Window对象之间的跨域通信.例如,在一个页面和它生成的弹出窗口之间,或者是页面和嵌入其中的iframe之间. 通常情况下,不同页面上 ...
- HTML5 window/iframe跨域传递消息 API
原文地址:HTML5′s window.postMessage API 在线示例:Using HTML5's window.postMessage(请打开控制台看日志) 原文日期: 2010年09月0 ...
- HTML5之worker开启JS多线程模式及window.postMessage跨域
worker概述 worker基本使用 window下的postMessage worker多线程的应用 一.worker概述 web worker实际上是开启js异步执行的一种方式.在html5之前 ...
- 利用HTML5的window.postMessage实现跨域通信
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77 HTML5的window.postMessage简述 postM ...
- HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...
- 使用window.name 进行数据跨域传递
其中要点, Stpe1,浏览器在Iframe中加载一个异域的页面,这个页面返回 <script>window.name="任何数据"</script>,这时 ...
- HTML5的postMessage使用记要
HTML5提出了一个新的用来跨域传值的方法,即postMessage(这个名字太通俗了所以你最好看看是不是自己写过一个同名的把它覆盖了).幸运的是IE8就开始支持了. 我们假设有两个网站,1.com与 ...
随机推荐
- 服务治理与RPC · 跬步
以前写过Django中使用zerorpc的方法,但是由于我们的Django是运行在gevent下,而zeromq需要启动一个后台进程处理消息,与gevent使用的greenlet携程是冲突的. 在Ja ...
- Android注解支持Support Annotations详解
###注解支持(Support Annotations)Android support library从19.1版本开始引入了一个新的注解库,它包含很多有用的元注解,你能用它们修饰你的代码,帮助你发现 ...
- JavaScript中点击按钮弹出新的浏览器窗口
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.js * 作者:常轩 * 微信公众号:Worldhel ...
- Nginx使用和配置
概要: Nginx 简介 Nginx 架构说明 Nginx 基础配置与使用 Nginx 反向代理与负载均衡 Nginx 实现高速缓存 Nginx 性能参数调优 一.Nginx 简介与安装 Nginx ...
- JAVA 中的反射（reflact）
获取反射加载类(获取类的字节码)的3种方式: Class class1=Class.forName("lession_svc.lession_svc.reflact.Person" ...
- 前端每日实战：10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视频是可以交 ...
- 数据挖掘入门系列教程（二）之分类问题OneR算法
数据挖掘入门系列教程(二)之分类问题OneR算法 数据挖掘入门系列博客:https://www.cnblogs.com/xiaohuiduan/category/1661541.html 项目地址:G ...
- Ubuntu系统下环境安装遇到依赖冲突问题
问题场景:在ubuntu系统下使用docker拉了一个python3.6的镜像,要在该容器中安装vim结果总是报已安装某些依赖的版本不满足要求 解决方法: 1.安装aptitude apt-get i ...
- GPS北斗NTP校时服务器原理及功能介绍
在科技的发展下GPS北斗NTP校时服务器也得到了广泛应用,比如工业.科研.航空航天.公共场所等领域都用到了GPS北斗NTP校时服务器,该时间服务器以卫星时间为基准授时准确,替代了传统钟表授时的单一和时 ...
- DEV GridControl控件使用（CheckBox全选、操作按钮、事件处理，获取值）
1.GridControl控件使用 (1)绑定数据源 //绑定DataTable gridControl1.DataSource = DbHelper.ExecuteDataTable("S ...