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

更新時間：2023年03月14日 14:37:10 作者：提筆忘字的帝國

這篇文章主要介紹了與iframe進(jìn)行跨域交互的解決方案,本文通過實例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言

在Web開發(fā)中，為了避免安全漏洞，瀏覽器會實行同源策略（Same-Origin Policy），即只允許同源網(wǎng)頁之間進(jìn)行交互，而跨域的交互是被禁止的。但是，有時我們需要在不同域名的頁面之間進(jìn)行數(shù)據(jù)傳遞和交互。

使用 postMessage() 方法

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

在父頁面中：

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

在子頁面中：

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

使用location.hash

在父頁面中設(shè)置一個定時器，用于檢測目標(biāo)頁面的URL哈希值是否發(fā)生變化

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

在子頁面中設(shè)置一個定時器，用于檢測父頁面URL哈希值是否發(fā)生變化

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

父頁面中通過改變iframe的src屬性來向目標(biāo)頁面發(fā)送消息

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

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

window.location.hash = message;

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

document.domain屬性

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

document.domain = "example.com";

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

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

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

var parentWindow = window.parent;

注：設(shè)置domain屬性是關(guān)鍵?。?！

使用window.name 屬性

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

在父頁面中：

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

在子頁面中：

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

在子頁面中，我們設(shè)置了 window.name 的值，并使用 window.top.postMessage 方法向父頁面發(fā)送消息。在父頁面中，我們通過監(jiān)聽 window.message 事件來接收這個消息。注意，postMessage 方法中的第二個參數(shù)必須是父頁面的域名，否則瀏覽器會拒絕發(fā)送消息。

需要注意的是，使用 window.name 屬性進(jìn)行跨域交互可能存在一些安全風(fēng)險，因此需要謹(jǐn)慎使用,window.name也有2M容量的限制

CORS

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

使用JSONP

JSONP 是一種通過動態(tài)添加 <script> 標(biāo)簽來實現(xiàn)跨域通信的方法。它的原理是在服務(wù)端返回一個函數(shù)調(diào)用，這個函數(shù)的參數(shù)是需要傳遞的數(shù)據(jù)。在客戶端中，通過動態(tài)創(chuàng)建 <script> 標(biāo)簽并指定 src 屬性來調(diào)用這個函數(shù)，從而實現(xiàn)跨域通信。需要注意的是，使用 JSONP 時需要信任提供數(shù)據(jù)的服務(wù)端，因為它會執(zhí)行服務(wù)端返回的代碼。

使用WebSocket

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