html5 通信方式,(原生js页面通信)关于html5的PostMessage的用法总结
大家都知道,網頁之間傳遞數據可以使用ajax請求來完成,今天我總結下我學習的postMessage是如何完成跨頁面請求數據的呢?首先,postMessage是html5新增的一個解決跨域的一個方法。那他是如何使用的呢?這里我把一個案例分享出來把。看下面的代碼:
test.html
onmessage=function(e){
e=e||event;
document.write("my name is ",e.data);
document.body.style.background = 'red';
};
1.html
window.postMessagetest接收區
var f=document.getElementById("f");
//給框架網頁發送消息,然后收到之后,會傳送過來。
f.οnlοad=function(){
setTimeout(function(){
f.contentWindow.postMessage("謝霆鋒","http://localhost:8080");
},3000)
}
首先,它的原理是這樣的。我就拿我的案例代碼來說吧。
1.html里面鑲嵌了一個iframe網頁 框架,他就是靠這里傳輸數據的,等1.html加載完成之后,他會主動發給test.html 謝霆鋒,然后test.html收到之后,它里面有接收消息的處理函數,他收到消息之后,立馬 ,給網頁返回 一段字符串,然后把自己的背景改成紅色。這樣就達到了網頁互動的效果,可惜的是,萬惡的ie6.7不支持,兼容度不高。
注意:postMessage的寫法,postMessage之前寫的是你要通信的window對象(也就是你要向誰通信),此時的window.parent的權限僅限于此,不能在像同域似的,進行獲取父級的DOM元素,否則瀏覽器會報錯,提示你不能進行跨域訪問,我們再來看postMessage中所接收的參數,第一個參數就是你要像另外一個窗口傳遞的數據(只能傳字符串類型),第二個參數表示目標窗口的源,協議+主機+端口號,是為了安全考慮,如果設置為“*”,則表示可以傳遞給任意窗口。
上面是單頁面交互的,下面給個雙頁面交互的。其實都是一樣的,不過就是 兩個頁面都寫了監聽 發送事件。
test.html
page B
send
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事件
}
1.html
window.postMessagetest接收區
page A
hello world
post message
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);
————————————————
版權聲明:本文為CSDN博主「衣服架子」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/huijiaaa1/java/article/details/80952315
總結
以上是生活随笔為你收集整理的html5 通信方式,(原生js页面通信)关于html5的PostMessage的用法总结的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 怀疑自己能不能接睫毛
- 下一篇: 庄家如何用计算机下单,新人必看!庄家透露