HTML5的postMessage的应用手册

日期:2021-02-23 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

大家在码编码的情况下,常常会碰到下列跨域的状况:

1、网页页面嵌入套iframe,与iframe的信息传送

2、网页页面与好几个网页页面之间的传送信息

对于这些让人头疼的跨域难题,html5特意推出新作用--postMessage(跨文本文档信息传送)。postMessage在应用时,必须传入2个主要参数,data和originUrl。data是指必须传送的內容,可是一部分访问器只能解决标识符串主要参数,因此大家1般把data编码序列化1下,即JSON.stringify(),originUrl是指总体目标url,特定的对话框。

下面立即甩事例,坚信大伙儿更非常容易了解写。

1、网页页面嵌入套iframe

父网页页面:

html:

<div id='parent'>hello word postMessage</div>
<iframe src="http://127.0.0.1:8082/index2.html" id='child'></iframe>

js:

window.onload=function(){

    window.frames[0].postMessage('postMessage','http://127.0.0.1:8082/index2.html')

} 

window.addEventListener('message',function(e){

    console.log(e)

    document.getElementById('parent').style.color=e.data

})

子网页页面:

html:

<div id='button' onclick='changeColor();' style="color:yellow">接纳信息内容</div>

js:

window.addEventListener('message',function(e){

      console.log(e)

      let color = document.getElementById('button').style.color

      window.parent.postMessage(color,'http://127.0.0.1:8081/index.html')

});

function changeColor(){

      let buttonColor = document.getElementById('button').style.color

      buttonColor='#f00'           

      window.parent.postMessage(buttonColor,'http://127.0.0.1:8081/index.html')

}

父网页页面根据postMessage的方式向iframe传送信息,而子网页页面根据window.addEventListener监视message方式来获得到父网页页面传送的值。以下图所示,data是父网页页面传送的值。

子网页页面向父网页页面传送信息,也是根据postMessage的方式去传送信息,并不是过是以window.parent.postMessage(data,url)的方法传值。父网页页面获得值也是一样监视message恶性事件。

2、多网页页面之间传送信息

父网页页面:

html:

<div id='parent' onclick="postMessage()">hello word postMessage</div>

js:

let parent = document.getElementById('parent')

function postMessage(){

    let windowOpen=window.open('http://127.0.0.1:8082/index2.html','postMessage')

    setTimeout(function(){

       windowOpen.postMessage('postMessageData','http://127.0.0.1:8082/index2.html')

  },1000) 

}

子网页页面:

html:

<div id='button' onclick='changeColor();' style="color:#f00">接纳信息内容</div>

js:

window.addEventListener('message',function(e){

      console.log(e)

 });

父网页页面向子网页页面传送信息根据window.open开启另外一个网页页面,随后向他传值。必须留意的是,应用postMessage传值的情况下必须应用setTimeout去延迟时间信息的传送,由于子网页页面的载入并不是1下子就载入进行的,也便是说子网页页面的监视恶性事件还未刚开始,此时传值以往是接受不到的。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。