iframe跨域問題詳解

一、iframe跨域問題嵌入別人的網站

在我們的網站引入別人的網站的時候，通常會使用iframe標籤，但是，由於同源策略的限制，當我們引入的網站和我們的網站不在同一個域中時，就會出現跨域問題。比如，我們的網站是www.example.com，而我們需要引入的網站是www.example.org，在引入的過程中就會發生跨域問題。

<iframe src="http://www.example.org"></iframe>

此時，我們的瀏覽器會禁止跨域請求，從而導致iframe無法載入引入的網站。

二、iframe跨域問題代理網址

為了解決跨域問題，我們可以使用代理網址的方法。具體方式是在我們自己的伺服器上，搭建一個代理伺服器，並在我們的網站中引入這個代理伺服器的地址，以代替引入的網站地址。在代理伺服器上，我們可以通過跨域請求來獲取引入的網站資源，再將資源返回給我們的網站。

<iframe src="http://www.example.com/proxy?url=http://www.example.org"></iframe>

在上述代碼中，我們引入的是代理伺服器的地址，同時將引入的網站地址作為參數傳遞給代理伺服器，從而實現了跨域訪問。

三、iframe跨域問題怎麼解決

除了使用代理伺服器以外，我們還可以採用其他方法來解決iframe跨域問題。下面是一些常用的解決方法。

1. 跨文檔消息傳遞

跨文檔消息傳遞（Cross-document Messaging，簡稱postMessage）是HTML5中提供的解決iframe跨域問題的方法。它可以在不同的文檔之間發送數據，並且可以跨域。使用該方法的前提是，我們需要在被引入的網站和我們的網站中，分別編寫接收和發送消息的代碼。

/* 發送消息 */
var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('hello', 'http://www.example.org');

/* 接受消息 */
window.addEventListener('message', function(event) {
  if (event.origin === 'http://www.example.com') {
    console.log(event.data); // 輸出接收到的數據
  }
});

2. 動態創建iframe的方式

在動態創建iframe的時候，可以設置iframe的sandbox屬性，該屬性可以對iframe中的內容進行限制。我們可以通過設置sandbox屬性，保證iframe中的內容與我們的網站在同一個安全沙箱中，從而避免跨域問題。

var iframe = document.createElement('iframe');
iframe.src = 'http://www.example.org';
iframe.sandbox = 'allow-scripts allow-same-origin';
document.body.appendChild(iframe);

3. 伺服器端設置跨域訪問

在一些情況下，我們可以在伺服器端對跨域訪問進行配置。比如，在使用Apache和Nginx作為伺服器的時候，可以通過修改配置文件，對跨域訪問進行設置。

以Nginx為例，我們可以在Nginx配置文件中添加以下語句：

location / {
  add_header Access-Control-Allow-Origin *;
}

通過以上設置，我們可以允許任意站點訪問我們的網站資源。

四、iframe跨域問題session

在使用iframe載入其他網站時，我們可能需要共享session信息，以方便用戶在不同網站之間傳遞數據。但是，由於跨域問題的存在，session信息默認是不能被共享的。為了解決這個問題，我們可以在跨域請求中添加withCredentials屬性，並設置為true。同時，在伺服器端，需要對請求進行配置，以允許跨域請求中的withCredentials屬性。

xhr.withCredentials = true;

五、iframe跨域問題chrome

在Chrome瀏覽器中，對於一些跨域請求，瀏覽器會默認阻止，從而導致iframe無法正常載入內容。為了解決這個問題，我們可以在Chrome瀏覽器中添加啟動參數，來禁止跨域阻止。

在啟動Chrome瀏覽器的時候，添加如下啟動參數：

--disable-web-security --user-data-dir=C:\ChromeUserData

六、iframe跨域問題cookie

由於同源策略的限制，對於非同源網站，無法通過ajax請求和iframe來獲取cookie信息。在處理此類問題時，我們可以在伺服器端進行設置，在請求頭中加入跨域請求所需要的cookie信息。同時，在伺服器端需要對跨域請求進行配置，以允許跨域請求中包含cookie信息。

/* 設置跨域cookie */
document.cookie = "name=value;domain=example.com";

/* 跨域請求中添加cookie信息 */
xhr.withCredentials = true;

七、iframe跨域方法

除了以上提到的方法外，還有一些其它方法可以解決iframe跨域問題，包括JSONP、CORS、WebSocket等。我們可以根據具體情況選擇合適的解決方法來解決iframe跨域問題，並在伺服器端進行相應的配置。

八、iframe的跨域處理

最近一些瀏覽器已經對跨域請求進行了處理，對於非同源請求，會在請求頭中添加Origin欄位，來表示請求的源地址。在響應中，伺服器會添加Access-Control-Allow-Origin欄位，來表示響應的源地址。通過這種方式，瀏覽器可以判斷是否允許跨域請求，並給予相應的處理。

九、iframe傳參 接收參數

在iframe中傳遞參數，我們可以採用url傳參、postMessage、hash傳參等方式。

下面是使用url傳參和postMessage傳參的示例代碼：

/* Url傳參 */
var url = 'http://example.com?id=1&name=Tom';
var iframe = document.createElement('iframe');
iframe.src = url;
document.body.appendChild(iframe);

/* postMessage傳參 */
var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage({id:1, name:'Tom'}, 'http://www.example.com');

結語：

以上是針對iframe跨域問題的詳細說明，希望能對大家有所幫助。在實際開發中，我們需要根據實際情況選擇適合的解決方法，並在伺服器端進行相應的配置，來解決跨域問題。