摘要:引入的的可以更方便有效安全的解決頁面與嵌套的消息傳遞多窗口之間消息傳遞跨域數據傳遞等問題下面簡單介紹一下的使用流程。
html5引入的message的API可以更方便、有效、安全的解決:
頁面與嵌套的iframe消息傳遞
多窗口之間消息傳遞
跨域數據傳遞等問題
下面簡單介紹一下postMessage的使用流程。
iframe 中使用:postMessage兩個參數,第一個傳遞的信息(如果是對象,最好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);
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89669.html
摘要:前言需求背景最近開發管理系統,需要在本頁面跳轉到一個圖片管理系統上傳圖片,上傳成功后返回圖片鏈接,然后返回管理系統,顯示圖片實現思路上傳圖片時,需要在本窗口跳轉到圖片管理系統,并且兩個系統之間要通信考慮到兩個系統是不同的端口號,存在跨域問題 前言 需求背景: 最近開發管理系統,需要在本頁面跳轉到一個圖片管理系統上傳圖片,上傳成功后返回圖片鏈接,然后返回管理系統,顯示圖片 實現思路: ...
摘要:說明方法可以安全地實現對象之間的跨域通信。接收窗口隨后可根據需要自行處理此事件。傳遞給的參數通過事件對象暴露給接收窗口。發送端程序發送消息的基本語法就是接收消息的窗口的引用。接收程序度空間從接收消息從收到消息演示地址跨域消息傳遞 說明 window.postMessage()方法可以安全地實現Window對象之間的跨域通信。例如,在一個頁面和它生成的彈出窗口之間,或者是頁面和嵌入其中的...
摘要:四傳遞信息給父頁面參考跨域子頁面傳給父頁面父頁面代碼崔渙測試父頁面參數中有屬性,就是父窗口發送過來的數據把父窗口發送過來的數據顯示在子窗口中。五簡單分析和安全問題傳送過來的信息如下圖,幾乎包含了所有應該有的信息。 背景:由于同源策略存在,javascript的跨域一直都是一個棘手的問題。父頁面無法直接獲取iframe內部的跨域資源;同時,iframe內部的跨域資源也無法將信息直接傳遞給...
摘要:的作用,就是為創造多線程環境,允許主線程創建線程,將一些任務分配給后者運行。在主線程運行的同時,線程在后臺運行,兩者互不干擾。等到線程完成計算任務,再把結果返回給主線程。如果發生錯誤,會觸發主線程的事件。 本文由云+社區發表 一、概述 JavaScript 語言采用的是單線程模型,也就是說,所有任務只能在一個線程上完成,一次只能做一件事。前面的任務沒做完,后面的任務只能等著。隨著電腦計...
摘要:的作用,就是為創造多線程環境,允許主線程創建線程,將一些任務分配給后者運行。在主線程運行的同時,線程在后臺運行,兩者互不干擾。等到線程完成計算任務,再把結果返回給主線程。如果發生錯誤,會觸發主線程的事件。 本文由云+社區發表 一、概述 JavaScript 語言采用的是單線程模型,也就是說,所有任務只能在一個線程上完成,一次只能做一件事。前面的任務沒做完,后面的任務只能等著。隨著電腦計...
閱讀 1158·2023-04-26 01:35
閱讀 2513·2021-11-02 14:44
閱讀 7644·2021-09-22 15:38
閱讀 2205·2021-09-06 15:11
閱讀 3720·2019-08-30 15:53
閱讀 795·2019-08-29 16:54
閱讀 631·2019-08-26 13:48
閱讀 1763·2019-08-26 13:47