postMessage

Kosmos 發(fā)布于2019-08-21 17:33 / 1733人閱讀

摘要：引入的的可以更方便有效安全的解決頁(yè)面與嵌套的消息傳遞多窗口之間消息傳遞跨域數(shù)據(jù)傳遞等問(wèn)題下面簡(jiǎn)單介紹一下的使用流程。

html5引入的message的API可以更方便、有效、安全的解決:

頁(yè)面與嵌套的iframe消息傳遞

多窗口之間消息傳遞

跨域數(shù)據(jù)傳遞等問(wèn)題

下面簡(jiǎn)單介紹一下postMessage的使用流程。

iframe 中使用：

postMessage兩個(gè)參數(shù)，第一個(gè)傳遞的信息(如果是對(duì)象，最好JSON.stringify下)，第二個(gè)targetOrigin（指定消息傳遞的地方，如果是*就是匹配所以的源）

var postMessage = "info";
top.postMessage({hash: postMessage}, "*"); // 這里的TOP是獲取的頂層，即有多層嵌套iframe的時(shí)候使用; top 即是window.top; 如果是直接的父級(jí)，就是window.parent

父頁(yè)面中使用:

window.addEventListener("message", function (event) {
        const data = event.data.hash;
        self.src = src + data;
        const path = "/monitor/index" + data;
        self.$router.push({path: path})
}, false);

GPU云服務(wù)器云服務(wù)器 postmessage

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89669.html

相關(guān)文章

iframe+postMessage實(shí)現(xiàn)跨域通信

摘要：前言需求背景最近開(kāi)發(fā)管理系統(tǒng)，需要在本頁(yè)面跳轉(zhuǎn)到一個(gè)圖片管理系統(tǒng)上傳圖片，上傳成功后返回圖片鏈接，然后返回管理系統(tǒng)，顯示圖片實(shí)現(xiàn)思路上傳圖片時(shí)，需要在本窗口跳轉(zhuǎn)到圖片管理系統(tǒng)，并且兩個(gè)系統(tǒng)之間要通信考慮到兩個(gè)系統(tǒng)是不同的端口號(hào)，存在跨域問(wèn)題前言需求背景：最近開(kāi)發(fā)管理系統(tǒng)，需要在本頁(yè)面跳轉(zhuǎn)到一個(gè)圖片管理系統(tǒng)上傳圖片，上傳成功后返回圖片鏈接，然后返回管理系統(tǒng)，顯示圖片實(shí)現(xiàn)思路： ...

Youngdze 2019-08-22 17:17 評(píng)論0 收藏0
利用window.postMessage()實(shí)現(xiàn)跨域消息傳遞（JavaScript）

摘要：說(shuō)明方法可以安全地實(shí)現(xiàn)對(duì)象之間的跨域通信。接收窗口隨后可根據(jù)需要自行處理此事件。傳遞給的參數(shù)通過(guò)事件對(duì)象暴露給接收窗口。發(fā)送端程序發(fā)送消息的基本語(yǔ)法就是接收消息的窗口的引用。接收程序度空間從接收消息從收到消息演示地址跨域消息傳遞說(shuō)明 window.postMessage()方法可以安全地實(shí)現(xiàn)Window對(duì)象之間的跨域通信。例如，在一個(gè)頁(yè)面和它生成的彈出窗口之間，或者是頁(yè)面和嵌入其中的...

VincentFF 2019-08-22 15:13 評(píng)論0 收藏0
postMessage處理iframe 跨域問(wèn)題

摘要：四傳遞信息給父頁(yè)面參考跨域子頁(yè)面?zhèn)鹘o父頁(yè)面父頁(yè)面代碼崔渙測(cè)試父頁(yè)面參數(shù)中有屬性，就是父窗口發(fā)送過(guò)來(lái)的數(shù)據(jù)把父窗口發(fā)送過(guò)來(lái)的數(shù)據(jù)顯示在子窗口中。五簡(jiǎn)單分析和安全問(wèn)題傳送過(guò)來(lái)的信息如下圖，幾乎包含了所有應(yīng)該有的信息。背景：由于同源策略存在，javascript的跨域一直都是一個(gè)棘手的問(wèn)題。父頁(yè)面無(wú)法直接獲取iframe內(nèi)部的跨域資源；同時(shí)，iframe內(nèi)部的跨域資源也無(wú)法將信息直接傳遞給...

cooxer 2019-08-19 17:42 評(píng)論0 收藏0
如何提升JavaScript的任務(wù)效率？學(xué)會(huì)后教給你同事

摘要：的作用，就是為創(chuàng)造多線程環(huán)境，允許主線程創(chuàng)建線程，將一些任務(wù)分配給后者運(yùn)行。在主線程運(yùn)行的同時(shí)，線程在后臺(tái)運(yùn)行，兩者互不干擾。等到線程完成計(jì)算任務(wù)，再把結(jié)果返回給主線程。如果發(fā)生錯(cuò)誤，會(huì)觸發(fā)主線程的事件。本文由云+社區(qū)發(fā)表一、概述 JavaScript 語(yǔ)言采用的是單線程模型，也就是說(shuō)，所有任務(wù)只能在一個(gè)線程上完成，一次只能做一件事。前面的任務(wù)沒(méi)做完，后面的任務(wù)只能等著。隨著電腦計(jì)...

SimonMa 2019-08-23 14:07 評(píng)論0 收藏0
如何提升JavaScript的任務(wù)效率？學(xué)會(huì)后教給你同事

摘要：的作用，就是為創(chuàng)造多線程環(huán)境，允許主線程創(chuàng)建線程，將一些任務(wù)分配給后者運(yùn)行。在主線程運(yùn)行的同時(shí)，線程在后臺(tái)運(yùn)行，兩者互不干擾。等到線程完成計(jì)算任務(wù)，再把結(jié)果返回給主線程。如果發(fā)生錯(cuò)誤，會(huì)觸發(fā)主線程的事件。本文由云+社區(qū)發(fā)表一、概述 JavaScript 語(yǔ)言采用的是單線程模型，也就是說(shuō)，所有任務(wù)只能在一個(gè)線程上完成，一次只能做一件事。前面的任務(wù)沒(méi)做完，后面的任務(wù)只能等著。隨著電腦計(jì)...

hot_pot_Leo 2019-08-16 14:01 評(píng)論0 收藏0