<strike id="gasgg"></strike>

<ul id="gasgg"></ul>

記一次：iframe嵌套網頁，利用window.postMessage()實現子父窗口相互傳值

widuu 發布于2019-08-22 16:37 / 3711人閱讀

摘要：通常，對于兩個不同頁面的腳本，只有當執行它們的頁面位于具有相同的協議通常為，端口號為的默認值，以及主機兩個頁面的模數設置為相同的值時，這兩個腳本才能相互通信。

場景需要：

http://a.com -父頁面，記做A

http://b.com -子頁面，記做B

B生成的DOM，獲取其屬性，傳值到A

A監聽事件，獲取監聽的屬性，傳到B

正文

利用window.postMessage() 方法可以安全地實現跨源通信。通常，對于兩個不同頁面的腳本，只有當執行它們的頁面位于具有相同的協議（通常為https），端口號（443為https的默認值），以及主機 (兩個頁面的模數 Document.domain設置為相同的值) 時，這兩個腳本才能相互通信。window.postMessage() 方法提供了一種受控機制來規避此限制，只要正確的使用，這種方法就很安全。

父頁面 A

子頁面 B

效果

本人不太會錄屏，就上截圖了

開始因為沒獲取的值，所以是undefined

云服務器 GPU云服務器子父傳值記一次在阿里云搭建服務器記一次阿里云服務器集體中毒子父窗口

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

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

關于跨域簡單總結

摘要：開發者需要在中設置屬性為跨域是的簡稱這是一種利用瀏覽器漏洞解決跨域的辦法腳本元素可以不受瀏覽器同源策略的限制。什么是瀏覽器同源策略? 同源是指,域名,協議,端口號均相同,如圖: showImg(https://segmentfault.com/img/bV9rAO?w=1088&h=394); 注意:localhost和127.0.0.1雖然都指向本機,但也是跨域. 瀏覽器同源策略(...

learning 2019-08-22 16:45 評論0 收藏0
跨域那些事兒

摘要：什么是跨域我們先看下以下場景開啟兩個本地服務器，頁面為，其中嵌套了，頁面想使用頁面的數據，例如調用它的方法，會報以下錯誤如圖所示，，，譯為協議主機和端口號必須符合，否則，就是跨域。跨域的幾種常見方案同源策略的限制范圍有以下幾種和無法讀取。什么是跨域我們先看下以下場景：開啟兩個本地服務器，頁面A為localhost:9800，其中嵌套了iframeB localhost:9000，頁...

nevermind 2019-08-21 15:01 評論0 收藏0
同源策略與跨域

摘要：簡單地理解就是因為同源策略的限制，它是瀏覽器為了安全性考慮一種非常重要的策略，域名下的無法操作或是域名下的對象。同源策略會限制以下三種行為和無法讀取。例如中可以引用等資源，此類操作不受同源策略限制。同源策略同源策略same origin policy中的重要內容就是URL（uniform resource locator）,統一資源定位符，俗稱網址。URL中的resource資源就...

xavier 2019-08-26 12:09 評論0 收藏0
同源策略與JS跨域（JSONP , CORS）

摘要：由此可以看出，同源策略確實是必不可少的，那么它會帶來哪些限制呢和無法讀取。由于瀏覽器的同源策略，在網頁端出現了這個跨域的問題，然而我們發現，所有的屬性并沒有受到相關的限制，比如等。本文按照政治問答題必備套路分為以下3個部分：為什么要跨域？跨域是什么？如何實現跨域？ Section1、為什么要跨域？自古以來（1995年起），為了用戶的信息安全，瀏覽器就引入了同源策略。那么同...

Shisui 2019-08-21 15:52 評論0 收藏0