Contributes21
Followers0
説明 window.postMessage()方法可以安全地實現Window對象之間的跨域通信。例如，在一個頁面和它生成的彈出窗口之間，或者是頁面和嵌入其中的iframe之間。 通常情況下，不同頁面上的腳本允許彼此訪問，當且僅當它們源自的頁面共享相同的協議，端口號和主機（也稱為“同源策略”）。window.postMessage()提供了一個受控的機制來安全地規避這個限制（如果使用得當的話）。 一
Nickname 毛瑞
在項目中遇到頁面中嵌入IFrame（主頁面和框架頁為不同域名）時，由於同源策略，主頁面和IFrame內頁無法通訊的問題。 同源策略是一個很重要的安全理念，它在保證數據的安全性方面有着重要的意義。同源策略規定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。那怎樣是相同的域呢？當兩個域具有相同的協議(如http), 相同的端口(如80)，相同的host（如www.ex
Nickname Even
簡介 一個利用html5的跨域api postMessage解決一個系統中，多個iframe跨域通信交互的js庫。 github地址 ：cross-domain 背景 最初公司只有一個系統來做銷售，隨着公司業務越來越多，搭建很多類似的系統（這些系統本來是沒有任何關係的，每個系統目前都非常複雜）。 由於目前公司戰略有調整，原來的銷售是針對某種產品，現在銷售工作要針對客户進行多產品的銷售促成，這樣一個
Nickname zhoutao
JSONP原理 JSON和JSONP JSON(JavaScript Object Notation)是一種輕量級的數據交換格式。對於JSON大家應該是很瞭解了吧，不是很清楚的朋友可以去json.org上了解下，簡單易懂。 JSONP是JSON with Padding的略稱。它是一個非官方的協議，它允許在服務器端集成Scripttags返回至客户端，通過javascriptcallbac
Nickname zhoutao
工作中有個需求是小程序的網頁在關閉的時候，需要回傳給小程序一個參數 查閲小程序官方文檔，有這樣一個接口 wx.miniProgram.postMessage ，可以用來從網頁向小程序發送消息，然後通過 bindmessage 事件來監聽消息，如下是官方文檔描述 以下是代碼： // 網頁代碼 !DOCTYPE html html head meta charset="utf
Nickname pxzsl
平時在開發中總是會遇到各種跨域問題，一直沒有很好地瞭解其中的原理，以及其各種實現方案。今天在這好好總結一下。 本文完整的源代碼請猛戳github博客，建議大家動手敲敲代碼。 1、什麼是跨域？為什麼會有跨域？ 一般來説，當一個請求url的協議、域名、端口三者之間任意一個與當前頁面地址不同即為跨域。 之所以會跨域，是因為受到了同源策略的限制，同源策略要求源相同才能正常進行通信，即協議、域名、端口
Nickname Alan
遇到的坑：webview和h5通信時，會有一些延遲導致不能立即生效 具體描述：在使用react-native時，需要加載外部網頁，加載後，RN提供一個按鈕可以關閉網頁，但如果打開的是內部網頁就需要隱藏這個按鈕，h5代碼使用react寫的，在componentDidMount時，發送postmessage給客户端（RN），此時發現收不到，查閲react-native官方文檔後得已解決。
Nickname 楊龍飛
原文：https://pantao.parcmg.com/pre... 在做 React Native 應用時，如果需要在 App 裏面內嵌 H5 頁面，那麼 H5 與 App 之間可以通過 Webview 的 PostMessage 功能實現實時的通訊，但是在小程序裏面，雖然也提供了一個 webview 組件，但是，在進行 postMessage 通訊時，官方文檔裏面給出了一條很變態的説明：
Nickname 大鬍子民工潘半仙
1、jsonp jsonp解決跨域問題的本質：script標籤可以請求不同域名下的資源，即script請求不受瀏覽器同源策略影響。 !DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titl
Nickname 浪遏飛舟
跨域是我們在項目中經常遇到的，前後端數據交互經常碰到請求跨域，首先我們來想一下為什麼會有跨域這個詞的出現？本文帶你來探討一下以下幾個問題： 跨域是什麼？ 為什麼要跨域？ 跨域的幾種方式？ ... 什麼是跨域? 跨域是指的瀏覽器不能執行其它網站的腳本，它是由瀏覽器的同源策略造成，是瀏覽器對JavaScript實施的安全限制。 跨域實際上指從一個域的網頁去請求另一個域的資源，比如：從 h
Nickname helloxiaoming
evt.origin為消息來源frame的location.origin evt.source為消息來源frame的window對象，通過evt.source.postMessage(message, evt.origin)即可回覆消息 需要特別注意的是frame unload時發送的消息，監聽方獲取到的evt.source為空，此時為不可回覆狀態，需要處理異常，否則會中斷代碼邏輯
Nickname 堅殼
1、jsonp jsonp解決跨域問題的本質：script標籤可以請求不同域名下的資源，即script請求不受瀏覽器同源策略影響。 !DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titl
Nickname 浪遏飛舟
項目需求： 一個項目兩個域名其中a.com域名，嵌套了b.com域名 當進入b頁面的時候就要切換到b.com域名，同時需要保持在a域名下的登陸狀態 解決：使用ifram + postMessage 主頁面 a域名 a域名下要協商ifram 標籤 iframe id="child" ref="iframBox" src="http://127.0.0.1:8082/#/mediatio
Nickname 那年
在日常工作中，消息通信是一個很常見的場景。比如大家熟悉 B/S 結構，在該結構下，瀏覽器與服務器之間是基於 HTTP 協議進行消息通信： 然而除了 HTTP 協議之外，在一些對數據實時性要求較高的場景下，我們會使用 WebSocket 協議來完成消息通信： 對於這兩種場景，相信大家都不會陌生。接下來，阿寶哥將介紹消息通信的另外一種場景，即父頁面與 iframe 加載的子頁面之間，如何進行消息通
Nickname 阿寶哥
眾所周知，postMessage 是在不同頁面間進行通信的一種常用方式: window.postMessage() 方法可以安全地實現跨源通信。通常，對於兩個不同頁面的腳本，只有當執行它們的頁面位於具有相同的協議（通常為https），端口號（443為https的默認值），以及主機 (兩個頁面的模數 Document.domain設置為相同的值) 時，這兩個腳本才能相互通信。window.postM
Nickname Fromin
前言 在低代碼編輯器中進行頁面預覽常常不得不用到iframe進行外鏈的url引入，這就涉及到了預覽頁面與編輯器頁面數據通信傳值的問題，常常用到的方案就是postMessage傳值，而postMessage本身在eventloop中也是一個宏任務，就會涉及到瀏覽器消息隊列處理的問題，本文旨在針對項目中的postMessage的相關踩坑實踐進行總結，也為想要使用postMessage傳遞數據的童鞋提供
Nickname 維李設論
楔子 postMessage 常見於內嵌 iframe 或是 Web Workers 中，用於跨頁面（線程） 的消息通信，在一些其他開發環境中也能看到類似的影子，如 Chrome 插件環境、Electron 環境、figma 插件等。 最近的工作需要經常與 iframe 與 Web Workers 打交道，處理頁面與內嵌頁、主線程與 worker 通信，擼了個用於處理瀏覽器消息通信的處理的工具庫
Nickname 臼犀
文章不易，請關注公眾號 毛毛蟲的小小蠟筆，多多支持，謝謝。 概念 window.name 1、在一個窗口還沒關閉之前，同一個窗口的所有頁面都共享同一個window.name。 這個窗口可理解為chrome瀏覽器的一個tab標籤頁面。另外，從一個頁面中跳轉到另一個頁面後，這些頁面都共享同一個window.name。 2、每個頁面都能讀和寫window.name。 這個可能就是安全問題的來源。 3、w
Nickname simonbaker
postMessage 是 html5 引入的 API，postMessage 方法允許來自不同源的腳本採用異步方式進行通信，其實同源不同頁面的腳本也可以採用 postMessage 方法進行通信。 介紹 發送數據 需要在接收數據窗口的全局對象下調用該方法。 targetWindow.postMessage(message, targetOrigin, [transfer]) targetWi
Nickname Steven
在開發日常中，會遇到使用iframe嵌套其他頁面，想要與嵌套頁面進行交互，常常會涉及到跨域問題，何為跨域？這涉及到同源策略，即協議、端口、域名相同則為同源 違反了同源策略就會出現跨域問題，主要表現為以下三方面： 1.無法讀取cookie、localStorage、indexDB 2.DOM無法獲得 3.ajax請求無法發送 解決方法 一、設置domain 前提條件：這兩個域名必須
Nickname mosquito
此方法可以用於實現跨源通信等，我們來演示如何實現在兩個窗口之間進行通信。 假設我們現在有兩個頁面：page1.html和page2.html， 他們的關係是通過iframe關聯起來的，就像這樣（下面是page1.html的內容）： iframe id="receiver" src="./page2.html" width="300" height="100"/iframe 為了實現通信，首先你需要
Nickname zxl20070701
朋友的網站有個需求：要從 A 域名遷移到 B 域名。所有內容不變，只是更改域名。這個需求不復雜，理論上改下配置然後 301 即可。但這個網站是純靜態網站，用户數據都存在 localStorage 裏，所以他希望能夠自動幫用户把數據也遷移到新域名。 我們知道，localStorage 是按照域名存儲的，B 網站無法訪問 A 網站的 localStorage。所以我們就需要一些特殊的手段來實現需求。經
Nickname Meathill
背景 後端同事提了個問題： 當打開實例詳情頁面後，再打開一個tab頁面，然後再訪問實例詳情頁面。如果這時候在某一個tab頁面切換到不同實例了，然後去到另一個tab頁面進行實例的操作，比如升級或者停止。會誤以為當前操作的是同一個實例。但很明顯兩個tab頁的實例是不一樣的，這樣很容易出現誤操作。 所以就想要保持不同tab頁的數據統一。也就是在tab頁面切換實例後，其他tab頁也要跟着切換到該實例。 解
Nickname simonbaker
背景 隔離環境通信，比如window.top和iframe；Chrome Extension各環境之間通信；主線程與web worker通信等；原生的通信方式會遇到以下問題 原生通信方式不支持response，比如 chrome.runtime.sendMessage (window | vscode | vscode.panel.webview |worker).po
Nickname defghy