认识postMessage
建站时常常遇到跨域传数的问题？别担心，HTML5里有个叫postMessage的好用API，它是从IE8起就能用的。HTML5特有但不影响大家使用，快来学起来！
说实话，postMessage就是个送信小能手，不管咱们客户端要传什么东西，不论是跨站还是同站点，它都能解决。好了，今天就给大伙儿聊聊怎么玩转postMessage和几个使用小窍门，让你更得心应手地交流信息。
应用场景举例
给你们举个挺实用的例子。当在网上找到了个不错的东东，但别的地方找不到？这时候，咱就得用上那个叫postMessage（推送消息）的神奇功能！不管是你登录网站还是注册账号，只要抓到那些重要数据，直接就能通过它分享到别的平台上去当然，使用这个功能的时候就要铭记保护个人隐私小心不要让坏蛋们偷偷摸摸地看了你的小秘密哟~
发送信息
发短信有点慢？别急，这时候给自己设个计时器，让它提醒你最佳时间，小技巧学起来，关键时刻就靠它！
接收信息处理
接收到PostMessage送过来的数字，得动手在网页编写程序。这就像监视message事件似的，知道是哪个哥们儿发的消息，POST时乱七八糟的事儿和他带来的厉害东西都能知道咯。想在iframe里用postMessage交换数据？可要当心点儿，别让信息丢啦或跑错地儿
重要事件属性解析
用postMessage这个东西，得留意好几点：
JavaScript Code复制内容到剪贴板
//弹出一个新窗口
var domain = 'http://haorooms.com';
var myPopup = window.open(domain
+ '/windowPostMessageListener.html','myWindow');
//周期性的发送消息
setTimeout(function(){
//var message = '当前时间是 ' + (new Date().getTime());
var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等
console.log('传递的数据是 ' + message);
myPopup.postMessage(message,domain);
},1000);
– source：消息源，即消息发送窗口或iframe
– origin：消息源URI，用于验证数据源的合法性
– data：发送方传递给接收方的具体数据内容
这些特性让我们能更好地处理来自postMessage的消息，快捷方便！
JavaScript Code复制内容到剪贴板
//监听消息反馈
window.addEventListener('message',function(event) {
if(event.origin !== 'http://haorooms.com') return; //这个判断一下是不是我这个域名跳转过来的
console.log('received response: ',event.data);
},false);
Web Workers实现非阻塞主线程
告诉你一个牛逼的知识：postMessage不仅仅是聊天，还能用浏览器自带的Workers功能实现非阻塞操作！先在主页上搞出一个Worker，再设定好它的onmessage事件接收器，然后用 postMessage传递计算后的结果给主程序就大功告成。这样一来，你的主程序就能畅快运行，同时加快网页加载，体验也是飞起来！
示例代码演示
来，我给你介绍个简单招数，包你学会用postMessage在所有浏览器里传递消息！
javascript 你就在主程搞个小跟班儿专门盯着`onmessage`的事儿不就行了吗。JavaScript Code复制内容到剪贴板 //捕获iframe var domain = 'http://haorooms.com'; var iframe = document.getElementById('myIFrame').contentWindow; //发送消息 setTimeout(function(){ //var message = '当前时间是 ' + (new Date().getTime()); var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等 console.log('传递的数据是: ' + message); //send the message and target URI iframe.postMessage(message,domain); },1000);咱们得搞个"计算器.js"小工具，以后要用到的话就能随时调用。
简化来说，就是说那个工人收到信息后，就能这样解决问题了：JavaScript Code复制内容到剪贴板 //响应事件 window.addEventListener('message',function(event) { if(event.origin !== 'http://haorooms.com') return; console.log('message received: ' + event.data,event); event.source.postMessage('holla back youngin!',event.origin); },false);工作者监听响应系统的事件。
"计算结果："+ event.data;
};在compute.js文件中：
Compute.js，咱就用postMessage传结果！
let result =0;
咱们来玩个游戏，从0开始数到100万。数完后记得告诉我！
result +=i;
}
JavaScript Code复制内容到剪贴板Test Web worker function init(){ var worker = new Worker('compute.js'); //event 参数中有 data 属性，就是子线程中返回的结果数据 worker.onmessage= function (event) { // 把子线程返回的结果添加到 p 上 document.getElementById("result").innerHTML += event.data+"
"; }; }postMessage(result);
聊到这儿，PostMessage跟Web Worker这俩技术在网页编程可是太棒了
总结与展望
总之，HTML5里面有个叫postMessage功能的东西超级厉害，方便我们程序员轻松把数据传送到每个人的电脑上去。学会用这个，咱们就可以放心分享各种消息，不仅是网站内部，甚至还包括那些躲在浏览器背后偷偷跑着的Web Workers都能用得上！再也不用担心写代码会影响到电脑速度了。以后网络更发达的话，这玩意儿肯定会发挥更大作用哒！
这篇文章看完了之后，你们会不会用HTML5里那个叫”postMessage”的API？如果还有啥不懂的，或者对于”postMessage”有自己的看法，别犹豫赶紧告诉我！
原文链接：https://www.icz.com/technicalinformation/web/2024/04/13619.html，转载请注明出处~~~
评论0