利用 postMessage 进行数据传递 （iframe 及web worker）及问题
一 postMessage应用于主页面和iframe之间进行数据的传递
1 子iframe页面向主页面进行数据传递；
// 多个子iframe需要将自己的计数统计到主页面进行数据上报
window.parent.postMessage({
count:count(),
id:'1'
},'*');
// 主页面进行接收
window.onmessage = (e)=>{
if(!e.data.id) return;
var id = e.data.id;
var count = e.data.count;
// 根据收到的子页面的数据进行更新的操作 通过id判断具体是哪个页面
updateCountMessage(id,count);
};
2 主页面向子页面进行数据的下发，比如需要将初始计数的数据分发到各个iframe
// 给各个iframe添加加载事件 以vue框架为例
// template
<iframe :ref="item.id" @load="loadandpostmessage" :data-id="item.id" :data.init="item.init"> // script
loadandpostmessage(event) {
event.target.contentWindow.postMessage({
id: event.target.dataset.id,
init: event.target.dataset.init,
oper: 'whole'
},'*');
}
// 可以根据列表的某一项分别的更新数据
opener(item){
this.$refs[vm.curId][0].contentWindow.postMessage({
id:item.id,
init: item.init,
oper: 'seperate'
},'*');
}
// 子页面进行数据的接收 ，可以同时对多个信息进行接收 ，只是需要不同的标记进行区别
window.onmessage = function(e){
if(!e.data.id) return;
if(e.data.oper=='whole'){
console.log('方式1接收到多个消息')
}else{
console.log('方式2接收到单独的主页面消息');
} };
注意：
1 当使用webpack时 webpack自身会发送postMessage，注意监听message时区分具体是自己发来的message还是webpackOK ;
2 Q ：在本地开启静态服务器（利用lite-server）时，在主页面和多个iframe页面之间数据传递调用相应的函数，会存在在不同的iframe页面内同一函数都被执行了的问题；
A： lite-server开启的静态服务器共享了实例导致不同页面的同一个函数都被执行，我们换一个server既可，如使用vs打开 之后选择要运行的文件在右下角功能栏最左侧有Go Live 既可在浏览器中打开页面
二 postMessage应用于js主线程和worker多线程之间进行数据传递,下面对比原生和webworker的不同
html文件内容
<!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>Document</title>
</head>
<body>
<div class="main-wrap"></div>
<div class="method">原生js获取获取数列第40项</div>
</body>
<script>
document.querySelector('.method').onclick = function(event){
console.log('hello world');
}
function fibonacci(n){
return n<2?n:arguments.callee(n-1)+arguments.callee(n-2);
}
console.log('原生js获取'+fibonacci(40)); // 利用worker 可以实现js的异步调用 这样避免了js文件因为数据等问题造成的页面的卡顿假死的现象；
// var myWorker = new Worker('./worker.js');
// myWorker.postMessage(40);
// myWorker.onmessage = function(event){
// var data = event.data;
// console.log('worker 40获取'+data);
// }
// myWorker.onerror= function(event){
// console.log(event.fileName, event.lineo,event.message);
// }
</script>
</html>
将js内容分别注释体验html页面的加载情况；
self.onmessage = function(event){
var data = event.data;
var ans = fibonacci(data);
this.postMessage(ans);
}
function fibonacci(n){
return n<2?n:arguments.callee(n-1)+arguments.callee(n-2);
}
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
关于webWorker可以参考：
http://www.ruanyifeng.com/blog/2018/07/web-worker.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Worker
利用 postMessage 进行数据传递 （iframe 及web worker）及问题的更多相关文章
- Android开发探秘之四：利用Intent实现数据传递
在Android开发过程中,很多人都熟悉Intent,这是个用于在多个View之间共享数据的类.本节主要是继承上节,通过点选ListView中的文本,把文本中的URL加载到一个新的页面上,并且打印出来 ...
- Android之利用EventBus进行数据传递
在项目中,不可避免的要在两个页面之间进行数据的传递,就算不传递,也需要进行刷新之类的,我们根据Google提供的库类方法,也是可以做的,主要有广播broadcastreceiver,startacti ...
- 使用Actor模型管理Web Worker多线程
前端固有的编程思维是单线程,比如JavaScript语言的单线程.浏览器JS线程与UI线程互斥等等,Web Woker是HTML5新增的能力,为前端带来多线程能力.这篇文章简单记录一下搜狗地图WebG ...
- html5跨域数据传递（postMessage）
在html5中有个支持跨域传递的方法postMessage,可是实现iframe之间的数据传递! 代码如下:数据发送页面 <!DOCTYPE HTML> <html lang=&qu ...
- iframe跨域数据传递
项目中需要和其他单位合作开发,方案采用iframe嵌入页面,开发过程中设计到了跨域数据的传递,初步方案决定使用html5 API postMessage进行iframe跨域数据传递: 域名A下的页面 ...
- HTML5中window.postMessage，在两个页面之间的数据传递
HTML5中window.postMessage,在两个页面之间的数据传递 2015年11月3日 8536次浏览 关于postMessage window.postMessage虽然说是html5的功 ...
- 基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式
在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括 ...
- Android 利用剪切板(clipboardManager )实现数据传递
首先是系统剪切板的调用服务: ClipboardManager ClipboardManager=getSystemService(Context.CLIPBOARD_SERVICE); 然后是写入, ...
- Java WEB中的HttpServletResponse数据传递
1.什么是HttpServletResponse 2.使用HttpServletResponse向浏览器发送数据及相关实例. 实例1:实现文件下载功能 实例2:实现验证码注册 实例3:实现页面3秒后跳 ...
随机推荐
- mysql百万级全文索引及match快速查找
建立全文索引的表的存储引擎类型必须为MyISAM 问题是match against对中文模糊搜索支持不是太好 新建一个utf8 MyISAM类型的表并建立一个全文索引 : CREATE TABL ...
- NSTextField/NSTextView中显示超链接以及NSMutableAttributedString用法
扩展NSAttributedString 简单的实现方法是为NSAttributedString 添加一个category. 然后为此category添加额外的方法. 具体实现如下: [代码]c#/c ...
- Java演算法-「馬踏棋盤問題」
/* * 馬踏棋盤問題:(貪婪法求解) * 棋盤有64個位置,“日”字走法,剛好走滿整個棋盤 */ //下一個走法的方向類 class Direction{ int x; int y; int way ...
- ALM 中查看某个 test 的更改 history 历史
ALM 中要查看某个 test 更改历史, 需要下面两个表: AUDIT_LOG and AUDIT_PROPERTIES ------- Get Test modification history ...
- LeetCode 50 - Pow(x, n) - [快速幂]
实现 pow(x, n) ,即计算 x 的 n 次幂函数. 示例 1: 输入: 2.00000, 10输出: 1024.00000 示例 2: 输入: 2.10000, 3输出: 9.26100 示例 ...
- SharePoint 已在此服务器场中安装 ID 为 XXXXXXXXX 的功能。请使用强制属性显式地重新安装此功能。解决方法
图1: 图2: 解决方法: stsadm -o deploysolution -name ***.wsp -immediate -allowGacDeployment -url http://*** ...
- 学号 20175313 《实验三 敏捷开发与XP实践》实验报告
目录 实验三 敏捷开发与XP实践 一.实验内容 二.实验步骤 四.心得体会 五.码云链接 六.参考资料 实验三 敏捷开发与XP实践 一.实验内容 (1)编码标准 在IDEA中使用工具(Code-> ...
- PHP多线程 curl_multi_init 的使用
php中可以通过CURL处理HTTP请求,其中curl_init()是单线程模式,如果需要对事务处理走多线程模式,那么就需要用到curl_multi_init()函数. 本案例用来测试大并发的情况下 ...
- [py]资源搜集
python在线内存图 我会把一些好的py book的资源放到这里 来源: https://piaosanlang.gitbooks.io/spiders/10day/README10.html Le ...
- 【技巧】-NO.123.数据处理技巧
Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...