亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

網(wǎng)站：www.lanlanwork.com 昌平區(qū)天通苑中苑61號(hào)樓4單元1502室 全國(guó)統(tǒng)一客服熱線：400-608-6026 公司郵箱:weibaobei@

 

文章目錄
1. 作用
2. 語(yǔ)法
3. 使用
4. 兼容性
5. 應(yīng)用場(chǎng)景
說(shuō)起postMessage 可能平時(shí)大家也不遇到，但是如果遇到問(wèn)題了，又想不起它，這里記錄下防止后面忘記它。


1. 作用
window.postMessage()方法可以安全地實(shí)現(xiàn)Window對(duì)象之間的跨域通信。例如，在一個(gè)頁(yè)面和它生成的彈出窗口之間，或者是頁(yè)面和嵌入其中的iframe之間。

通常情況下，受瀏覽器“同源策略”的限制跨域問(wèn)題一直是個(gè)問(wèn)題，window.postMessage()提供了一個(gè)受控的機(jī)制來(lái)安全地規(guī)避這個(gè)限制（如果使用得當(dāng)?shù)脑挘?br/>
2. 語(yǔ)法
一般來(lái)說(shuō)，一個(gè)窗口可以獲得對(duì)另一個(gè)窗口的引用(例如，通過(guò)targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派發(fā)MessageEvent。接收窗口隨后可根據(jù)需要自行處理此事件，傳遞給window.postMessage()的參數(shù)通過(guò)事件對(duì)象暴露給接收窗口。

基本語(yǔ)法：

targetWindow.postMessage(message, targetOrigin, [transfer]);
1
targetWindow
targetWindow就是接收消息的窗口的引用。 獲得該引用的方法包括：

Window.open
Window.opener
HTMLIFrameElement.contentWindow
Window.parent
Window.frames +索引值
message
要發(fā)送到目標(biāo)窗口的消息。 數(shù)據(jù)使用結(jié)構(gòu)化克隆算法進(jìn)行序列化。 這意味著我們可以將各種各樣的數(shù)據(jù)對(duì)象安全地傳遞到目標(biāo)窗口，而無(wú)需自己對(duì)其進(jìn)行序列化。

targetOrigin
定目標(biāo)窗口的來(lái)源，必須與消息發(fā)送目標(biāo)相一致，可以是字符串或URI。 表示任何目標(biāo)窗口都可接收，為安全起見(jiàn)，請(qǐng)一定要明確提定接收方的URI。如果為"*"則都可以接收。

transfer
可選屬性。是一串和message同時(shí)傳遞的Transferable對(duì)象,這些對(duì)象的所有權(quán)將被轉(zhuǎn)移給消息的接收方,而發(fā)送一方將不再保有所有權(quán)。

3. 使用
postMessage程序

var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('send');
btn.addEventListener('click', function (e) {
    e.preventDefault();
    var val = document.getElementById('text').value;
    receiver.postMessage("Hello "+val+"！", "http://www.xxx.com");
}); 

接收端

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
  if (event.origin !== "http://www.xxx.com")
    return;
}

event對(duì)象有三個(gè)屬性，分別是origin，data和source。event.data表示接收到的消息；event.origin表示postMessage的發(fā)送來(lái)源，包括協(xié)議，域名和端口；event.source表示發(fā)送消息的窗口對(duì)象的引用; 我們可以用這個(gè)引用來(lái)建立兩個(gè)不同來(lái)源的窗口之間的雙向通信。

4. 兼容性

總體兼容性還是很好的！


5. 應(yīng)用場(chǎng)景
跨域通信(包括GET請(qǐng)求和POST請(qǐng)求)
WebWorker
vue項(xiàng)目中使用到了iframe并且需要傳遞參數(shù)

————————————————
版權(quán)聲明：本文為CSDN博主「zy1281539626」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/zy1281539626/article/details/114934551

藍(lán)藍(lán)設(shè)計(jì)( www.lanlanwork.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

標(biāo)簽: html js 前端知識(shí)總結(jié)