postmessage用途详解-百分百源码网

postmessage用途详解

发布时间：09/01 来源：未知浏览：关键词：

postmessage是html5新增的一个解决跨域的办法，其运用办法：第一在html里面新建一个iframe网页框架；然后新建一个接收新闻的处置函数；接着给网页返回一段字符串即可。

postmessage用途

对于html5的PostMessage的用途总结

大家都晓得，网页之间通报数据可以运用ajax要求来完成，今天我总结下我学习的postMessage是怎样完成跨页面要求数据的呢？第一，postMessage是html5新增的一个解决跨域的一个办法。那他是怎样运用的呢？这里我把一个案例分享出来把。

相干视频教程举荐：html视频教程

看下面的代码：

test.html









《script》
onmessage=function(e){
  e=e||event;
  document.write("my name is ",e.data);
   document.body.style.background = 'red';
};
《script》

1.html




window.postMessage

test接收区


 


《script》
var f=document.getElementById("f");
//给框架网页发送新闻，然后收到之后，会传送过来。
f.οnlοad=function(){
 setTimeout(function(){
  f.contentWindow.postMessage("谢霆锋","http://localhost:8080");
 },3000)
}
《script》

第一，它的道理是这样的。我就拿我的案例代码来说吧。

1.html里面镶嵌了一个iframe网页框架，他就是靠这里传输数据的，等1.html加载完成之后，他会自动发给test.html 谢霆锋，然后test.html收到之后，它里面有接收新闻的处置函数，他收到新闻之后，立马，给网页返回一段字符串，然后把本人的配景改成红色。这样就达到了网页互动的结果，惋惜的是，万恶的ie6.7不支撑，兼容度不高。

注意：postMessage的写法，postMessage以前写的是你要通讯的window对象（也就是你要向谁通讯），此时的window.parent的权限仅限于此，不克不及在像同域似的，进行猎取父级的DOM元素，不然阅读器会报错，提醒你不克不及进行跨域拜访，我们再来看postMessage中所接收的参数，首先个参数就是你要像别的一个窗口通报的数据（只能传字符串类型），第二个参数表示指标窗口的源，协定+主机+端标语，是为了平安考虑，要是设定为“*”，则表示可以通报给任意窗口。

上面是单页面交互的，下面给个双页面交互的。其实都是同样的，不外就是两个页面都写了监听发送事件。

test.html








page B
 



 
 
《script》
window.addEventListener('message', function(ev) {
    // if (ev.source !== window.parent) {return;}
    var data = ev.data;
  document.write("my name is ",data);
   document.body.style.background = 'red';
}, false);
 
function send() {
    var data = document.querySelector('#inp').value;
    parent.postMessage(data, 'http://localhost:8080/'); // 若父页面的域名和指定的纷歧致，则postMessage失败
    // parent.postMessage(data, '*'); // 触发父页面的message事件
}
《script》

1.html




window.postMessage

test接收区


 
 
page A

    hello world
    



 
《script》
function send() {
    var data = document.querySelector('#data').value;
 
    window.frames[0].postMessage(data, 'http://localhost:8080/'); // 触发跨域子页面的messag事件
}
 
window.addEventListener('message', function(messageEvent) {
    var data = messageEvent.data; 
    console.info('message from child:', data);
    document.write("收到了数据： ",data);
    document.body.style.background = 'red';
}, false);
《script》

一样的，1.html是主页面。打开html，就可以实现交互了。

更多编程相干学习，请关注百分百源码网编程入门视频教程频道！

以上就是postmessage用途详解的细致内容，更多请关注百分百源码网其它相干文章！

打赏