使用window.name 屬性 

 可以利用 iframe 的 window.name 屬性來進行跨域交互。由于 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 對象中設置 name 屬性
}
</script>

在子頁面中：

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

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

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

CORS

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

使用JSONP

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

使用WebSocket 

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

使用WebRTC 

WebRTC可以在不同域名下的瀏覽器之間直接傳輸數(shù)據(jù)，從而實現(xiàn)跨域通信。 

使用中間頁面 

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

到此這篇關于與iframe進行跨域交互的解決方案的文章就介紹到這了,更多相關iframe跨域交互內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！