前端解決跨域問題的N種方法之postMessage

YanceyOfficial 發布于2019-08-21 14:36 / 438人閱讀

摘要：平時會不會有一個需求是我在打開不同域網站的時候要把我的某個變量數據傳遞過去方法有很多很多種今天介紹下語法其他窗口的一個引用，比如的屬性執行返回的窗口對象或者是命名過或數值索引的參數將要發送到其他的數據。將會被結構化克隆算法序列化。

平時會不會有一個需求是我在打開不同域網站的時候要把我的某個變量數據傳遞過去方法有很多很多種今天介紹下postMessage

H5 postMessage

語法

otherWindow.postMessage(message, targetOrigin);

otherWindow

其他窗口的一個引用，比如iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames

參數(message, targetOrigin)

message: 將要發送到其他
window的數據。將會被結構化克隆算法序列化。這意味著你可不受什么限制的安全傳送數據對象給目標窗口而無需自己序列化

targetOrigin：(MDN上的解釋比較長，簡而言之)字符串參數，指明目標窗口的源

看下例子

aaa.html

bbb.html

看一下打印出來的e的內容

相對重要屬性如下

data：是傳遞來的message

source：發送消息的窗口對象

origin：發送消息窗口的源（協議+主機+端口號）

附上我的訂閱號二維碼，歡迎關注，一起學前端

云服務器 GPU云服務器解決問題的方法云服務器問題及解決方法在家賺錢的十種方法數據遷移的四種方法

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

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

那些年曾談起的跨域

摘要：在中，在不同的域名下面進行數據交互，就會遇到跨域問題，說到跨域首先要從同源說起，瀏覽器為了提供一種安全的運行環境，各個瀏覽器廠商協定使用同源策略。在上面說過是不受同源策略限制的，但是出于安全原因，瀏覽器限制從腳本內發起的跨源請求。對于前端開發來說跨域應該是最不陌生的問題了，無論是開發過程中還是在面試過程中都是一個經常遇到的一個問題，在開發過程中遇到這個問題的話一般都是找后端同學去解決...

galois 2019-08-23 18:13 評論0 收藏0
Web開發之跨域與跨域資源共享

摘要：例外當涉及到同源策略時，有兩個主要的例外授信范圍兩個相互之間高度互信的域名，如公司域名，不遵守同源策略的限制。端口未將端口號加入到同源策略的組成部分之中，因此和屬于同源并且不受任何限制。原文鏈接：http://www.devsai.com/2016/11/24/talk-CORS/ 同源策略（same origin policy） 1995年，同源政策由 Netscape 公司引入瀏...

Eastboat 2019-08-20 12:29 評論0 收藏0
利用html5的postmessage解決iframe跨域問題的庫cross-domain.js，使

摘要：簡介一個利用的跨域解決一個系統中，多個跨域通信交互的庫。然而各系統采用了不同的域名，與主框架系統和其它業務系統有跨域問題若將所有域名改為同一域名下可能會產生一些系統間頁面元素和樣式的沖突故采用了標準下的來解決該問題。簡介一個利用html5的跨域api postMessage解決一個系統中，多個iframe跨域通信交互的js庫。 github地址：cross-domain 背景最...

I_Am 2019-08-22 18:25 評論0 收藏0