window.postMessage的基本概念
你听过window.postMessage没?这是HTML5的新功能,解决了网页之间互相传递信息的难题,而且即使地址不同也能用!想象下,就像在这个页面和另一个不想关的页面聊天一样,不用跳转,多方便!
聊聊嘛这个咋弄?超简单的!这边说话那边就立刻能看见了,接着就能回你的话。就是咱们小时候传纸条的那种感觉,不过现在是用网络罢了。发信息时别忘了告诉人家你在哪儿,收到的人最好也确认下对方的身份才敢安心回信哈。
创建数据发送端的步骤
首先,得找个地方发消息。简单点儿搞个新的网页窗口或者嵌入一个iframe框框就算成。比如说,我们可以写个代码,让这个小窗口每隔六秒发次消息。这样子就能把消息的速度控制好了,保证准时送达!
接着,咱们也得搞个接收器啥的,就跟等人家回消息似的。但别忘了,你浏览器得支持这个再说。如果不行,那就试试用jQuery或Dojo这种小助手帮帮手。
//弹出一个新窗口 var domain = 'http://scriptandstyle.com'; var myPopup = window.open(domain + '/windowPostMessageListener.html','myWindow'); //周期性的发送消息 setInterval(function(){ var message = 'Hello! The time is: ' + (new Date().getTime()); console.log('blog.local: sending message: ' + message); //send the message and target URI myPopup.postMessage(message,domain); },6000); //监听消息反馈 window.addEventListener('message',function(event) { if(event.origin !== 'http://scriptandstyle.com') return; console.log('received response: ',event.data); },false);
确保消息的安全性
发消息记得用window.postMessage这样别人看不到我们说的啥了,嘿嘿~收到消息后要先看看是谁发的,如果来源可靠我们再大胆接收!
我再说最后一遍,要用iframe发信息的话,contentWindow这个属性可别弄错了。别想着乱改节点对象,不然会有可能出现安全隐患的
开发数据接收端的页面
咱们来学着做个能收发消息的网页!首先,网页里要有个能抓住”message”事件的东西,就像个小耳朵一样监听这个事件。然后,有新的消息来了,得先看看到底是谁发的,不要被坏人忽悠咯。
在想象你家有个私人邮箱时,就像是只有你信赖的朋友才能发给你信息,而其他烦人的垃圾邮件都被挡掉了。
//捕获iframe var domain = 'http://scriptandstyle.com'; var iframe = document.getElementById('myIFrame').contentWindow; //发送消息 setInterval(function(){ var message = 'Hello! The time is: ' + (new Date().getTime()); console.log('blog.local: sending message: ' + message); //send the message and target URI iframe.postMessage(message,domain); },6000);
事件属性的重要性
记住,利用postMessage这个高大上的功能得搞懂什么叫source跟origin。source就像是说到哪儿发消息(比如窗口或者iframe);但origin,就相当于你发消息时那个真实的出生地,没有它就不能生效。说白了,它们就像是给你的消息填好了邮寄地址.source是发件人地址,origin是收件人地址,通过这种方式确保消息安全到达目的地。
这个,可得小心点儿!首先得弄清数据是哪儿来的,像网上购物的话,要是不看看卖家信用度,那可不就傻眼!
实际应用案例分析
//响应事件 window.addEventListener('message',function(event) { if(event.origin !== 'http://davidwalsh.name') return; console.log('message received: ' + event.data,event); event.source.postMessage('holla back youngin!',event.origin); },false);
要是想做个网上聊天软件,目的肯定就是让大家畅所欲言。这时候,window.postMessage这招就很管用,信息传得像飞一样快,聊天也就更带劲了,而且还能防止隐私泄露!
这份活儿可不能让人聊天时紧张哦,要大家都轻松畅聊不外泄聊天内容,想想看,这可不就是办个热闹的聚会吗?咱们得让每个人都放心尽兴地玩起来。
总结与展望
看了这篇文章后,有木有觉得window.postMessage超好用?又方便又保险,保护咱们的数据隐私。相信等HTML5发展得更好点,window.postMessage就更广泛使用~
最后,我得问问你,做项目的时候有没有用过window.postMessage这个方法来提高传输效率和稳定性?在评论区告诉大家,分享文章的话别忘了点赞支持下~
评论0