postMessage

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

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

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

頁面與嵌套的iframe消息傳遞

多窗口之間消息傳遞

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

下面簡單介紹一下postMessage的使用流程。

iframe 中使用：

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

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

父頁面中使用:

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云服務器云服務器 postmessage

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

轉載請注明本文地址：http://m.hztianpu.com/yun/89669.html

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

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

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

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

VincentFF 2019-08-22 15:13 評論0 收藏0
postMessage處理iframe 跨域問題

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

cooxer 2019-08-19 17:42 評論0 收藏0
如何提升JavaScript的任務效率？學會后教給你同事

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

SimonMa 2019-08-23 14:07 評論0 收藏0
如何提升JavaScript的任務效率？學會后教給你同事

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

hot_pot_Leo 2019-08-16 14:01 評論0 收藏0