與iframe進行跨域交互的解決方案(推薦)

Posted on by

前言

在Web開發中，為瞭避免安全漏洞，瀏覽器會實行同源策略（Same-Origin Policy），即隻允許同源網頁之間進行交互，而跨域的交互是被禁止的。但是，有時我們需要在不同域名的頁面之間進行數據傳遞和交互。 

使用 postMessage() 方法

通過 postMessage() 方法可以在兩個不同的窗口之間傳遞消息，包括不同域名的 iframe。在父頁面中使用 postMessage() 方法發送消息，在子頁面中使用 addEventListener() 方法監聽消息。需要註意的是，需要在兩個頁面中都添加相應的代碼才能實現跨域交互。 

在父頁面中： 

// 發送消息到 iframe
var iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('Hello from parent', '*');
 
// 接收子頁面發來的消息
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://example.com') return; // 驗證消息來源
  console.log('Received message from iframe:', event.data);
}, false);

在子頁面中：

// 發送消息到父頁面
window.parent.postMessage('Hello from iframe', '*');
 
// 接收父頁面發來的消息
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://example.com') return; // 驗證消息來源
  console.log('Received message from parent:', event.data);
}, false);

使用location.hash 

在父頁面中設置一個定時器，用於檢測目標頁面的URL哈希值是否發生變化 

setInterval(function() {
  if (document.getElementById("myIframe").contentWindow.location.hash) {
    // 子頁面URL哈希值發生變化，執行相應的操作
  }
}, 100);

在子頁面中設置一個定時器，用於檢測父頁面URL哈希值是否發生變化 

setInterval(function() {
  if (window.location.hash) {
    // 父頁面URL哈希值發生變化，執行相應的操作
  }
}, 100);

父頁面中通過改變iframe的src屬性來向目標頁面發送消息 

document.getElementById("myIframe").src = "http://www.example.com/target-page#" + message;

子頁面中通過改變location.hash來向父頁面發送消息 

window.location.hash = message;

使用location.hash和iframe進行跨域交互的方式存在一些限制和安全風險，例如URL哈希值的長度限制、URL哈希值被篡改等問題，因此需要謹慎使用，確保數據的安全性和完整性 

document.domain屬性 

子頁面中設置document.domain屬性，將其設置為父頁面的域名，以便子頁面和父頁面具有相同的域名，從而實現跨域交互。

document.domain = "example.com";

父頁面通過iframe元素的contentWindow屬性獲取子頁面的window對象，從而可以訪問子頁面的內容和方法。 

var iframe = document.getElementById("myFrame");
var childWindow = iframe.contentWindow;

 子頁面可以通過window.parent屬性獲取父頁面的window對象，從而可以訪問父頁面的內容和方法。

var parentWindow = window.parent;

註： 設置domain屬性是關鍵！！！

使用window.name 屬性 

 可以利用 iframe 的 window.name 屬性來進行跨域交互。由於 window.name 屬性在同一窗口中是唯一的，因此可以將需要傳遞的數據存儲在該屬性中，在父頁面中讀取。

在父頁面中： 

<iframe id="myIframe" src="http://www.b.com"></iframe>
<script>
window.addEventListener('message', function(e) {
  // 處理從子頁面發送過來的消息
  console.log(e.data);
});
 
function onLoad() {
  var iframe = document.getElementById('myIframe');
  var iframeWindow = iframe.contentWindow;
  // 獲取 iframe 的 window 對象
  iframeWindow.name = 'hello from A';
  // 在 iframe 的 window 對象中設置 name 屬性
}
</script>

在子頁面中：

// 發送消息給父頁面
window.top.postMessage(window.name, 'http://www.a.com');

在子頁面中，我們設置瞭 window.name 的值，並使用 window.top.postMessage 方法向父頁面發送消息。在父頁面中，我們通過監聽 window.message 事件來接收這個消息。註意，postMessage 方法中的第二個參數必須是父頁面的域名，否則瀏覽器會拒絕發送消息。 

需要註意的是，使用 window.name 屬性進行跨域交互可能存在一些安全風險，因此需要謹慎使用,window.name也有2M容量的限制

CORS

CORS（Cross-Origin Resource Sharing）是一種跨域資源共享的機制，它通過在服務端設置響應頭來實現跨域通信。通過在響應頭中設置 Access-Control-Allow-Origin、Access-Control-Allow-Methods 等字段，可以允許指定的源、方法等跨域訪問資源。在客戶端中，可以像訪問同域資源一樣訪問跨域資源。

使用JSONP

JSONP 是一種通過動態添加 <script> 標簽來實現跨域通信的方法。它的原理是在服務端返回一個函數調用，這個函數的參數是需要傳遞的數據。在客戶端中，通過動態創建 <script> 標簽並指定 src 屬性來調用這個函數，從而實現跨域通信。需要註意的是，使用 JSONP 時需要信任提供數據的服務端，因為它會執行服務端返回的代碼。

使用WebSocket 

WebSocket 是一種雙向通信協議，可以在客戶端和服務端之間建立一個持久化的連接。與 HTTP 不同，WebSocket 不會遵循同源策略，因此可以實現跨域通信。在客戶端中，可以使用 WebSocket 對象與服務端建立連接，並通過 send() 方法發送數據。在服務端中，可以監聽 WebSocket 連接，並在接收到客戶端的數據時進行處理。 

使用WebRTC 

WebRTC可以在不同域名下的瀏覽器之間直接傳輸數據，從而實現跨域通信。 

使用中間頁面 

參考鏈接：如何基於 iframe 解決跨域？ 

到此這篇關於與iframe進行跨域交互的解決方案的文章就介紹到這瞭,更多相關iframe跨域交互內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：