前端常用的通信技术(4)_H5之家 - 中国HTML5教程资源分享第一站

post1.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .sendbox{ background: #efefef; margin-bottom: 10px; } </style> </head> <body> <div class="sendbox"> <button id="sendbox2">直接发送到右边iframe</button> 左边的iframe </div> <div id="box2"> </div> <script> document.getElementById('sendbox2').addEventListener('click', function(){ window.parent.post2.postMessage('收到来自左边ifarme的消息' + +new Date(),'*'); }); function addbox(html){ var item = document.createElement('div'); item.innerHTML = html; document.getElementById('box2').append(item); } window.addEventListener('message',function(e){ if(e.data){ addbox(e.data); } },false); </script> </body> </html>

post2.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .sendbox{ background: #ccc; margin-bottom: 10px; } </style> </head> <body> <div class="sendbox" style="text-align: right;"> <button id="sendbox">中转到左边</button> <button id="sendbox2">直接到左边</button> 右边的iframe </div> <div id="box"></div> <script> document.getElementById('sendbox').addEventListener('click', function(){ /*- 向父级页面传 -*/ window.parent.postMessage('来自post2的消息' + +new Date(),'*'); }); document.getElementById('sendbox2').addEventListener('click', function(){ window.parent.post1.postMessage('直接来自右边' + +new Date(),'*'); }); function addbox(html){ var item = document.createElement('div'); item.innerHTML = html; document.getElementById('box').append(item); } window.addEventListener('message',function(e){ if(e.data){ addbox(e.data); } },false); </script> </body> </html> 五、Web Workers 进程通信（html5中的js的后台进程）

javascript设计上是一个单线，也就是说在执行js过程中只能执行一个任务, 其他的任务都在队列中等待运行。

如果我们执行大量计算的任务时，就会阻止浏览器执行js，导致浏览器假死。

html5的 web Workers 子进程就是为了解决这种问题而设计的。把大量计算的任务当作类似ajax异步方式进入子进程计算，计算完了再通过 postmessage通知主进程计算结果。

图片来源于网络. 侵删

主线程代码(index.html)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box-warp > div{ border: 1px solid #ccc; margin:10px; padding:10px; } </style> </head> <body> <button id="btn">开启一个后台线程(点击外框中止线程)</button> <div class="box-warp" id="boxwarp"></div> <script> var id = 1; function init_works(){ var warpid = 'box'+id; var box = document.createElement('div'); box.id = warpid; document.getElementById('boxwarp').append(box); var worker = new Worker('./compute.js'); //监听后台进程发过来的消息 worker.onmessage= function (event) { // 把子线程返回的结果添加到 div 上 document.getElementById(warpid).innerHTML += event.data+"<br/>"; }; //点击中止后端进程 box.addEventListener('click', function(){ worker.postMessage("oh, 我被干掉了" + warpid); var time = setTimeout(function(){ worker.terminate(); clearTimeout(time); },0); }); //往后台线程发送消息 worker.postMessage("hi, 我是" + warpid); id++; } document.getElementById('btn').addEventListener('click', function(){ init_works(); }); </script> </body> </html>