使用iframe解決AJAX javascript的跨域訪問執行

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在網站調用載入評論等資訊的時候遇到了不同網域名稱間javascript不能執行的問題，一直都在載入中顯示不出來，而換個網址訪問的話就能正確顯示，一直沒去注意瀏覽器提示的錯誤資訊:

突然感覺就是這裡的問題，研究一下，搞定後其實覺得挺容易的，只是自己知識還是有些欠缺，解決方案如下：
阻塞的AJAX請求
　　我們先來證實一下請求的阻塞情況吧。我們使用如下的代碼：
連續發起三個請求

[複製此代碼]CODE:function simpleRequest()
{
var request = new XMLHttpRequest();
request.open(”POST“, “Script.ashx“);
request.send(null);
}
function threeRequests()
{
simpleRequest();
simpleRequest();
simpleRequest();
}

　　當執行threeRequests時就會連續發出3個相同網域名稱的請求，還是通過統計圖表來查看阻塞的效果：

最後的請求被前兩個請求阻塞
　　每個請求需要花費1.5秒的時間。很明顯，第三個請求必須等到第一個請求結束之後才能執行，因此總共需要進行3秒多鐘才能執行完畢。我們要改變的就是這個狀況。
傳統的跨網域名稱非同步請求解決方案
　
　AJAX安全性的唯一保證，似乎就是對於跨網域名稱（Cross-Domain）AJAX請求
的限制。除非開啟本地硬碟的網頁，或者在IE中將跨網域名稱傳輸資料的限制開啟，否則向其他網域名稱發出AJAX請求都會被禁止。而且對於跨網域名稱的判斷非常嚴格，
不同的子網域名稱，或者相同網域名稱的不同連接埠，都會被認作是不同的網域名稱，我們不能向它們的資源發出AJAX請求。
　　從表面上看起來似乎沒有辦法打破這個限制，還好我們有個救星，那就是iframe！
　
　iframe雖然不在標準中出現，但是由於它實在有用，FireFox也“不得不”對它進
行了支援（類似的還有innerHTML）。網上已經有一些跨網域名稱發出非同步請求的做法，但是它們實在做的不好。它們的簡單工作原理如下：在另一個網域名稱下放
置一個特定的分頁檔作為Proxy，首頁面將非同步請求的資訊通過Query
String傳遞入iframe裡的Proxy頁面，Proxy頁面在AJAX請求執行完畢後將結果放在自己location的hash中，而首頁面會對
iframe的src的hash值進行輪詢，一旦發現它出現了改變，則通過hash值得到需要的資訊。
　　這個方法的實現比較複雜，而且功能
有限。在
IE和FireFox中，對於URL的長度大約可以支援2000個左右的字元。對於普通的需求它可能已經足夠了，可惜如果真要傳遞大量的資料，這就遠遠不
夠了。與我們一會兒要提出的解決方案相比，可能它唯一的優勢就是能夠跨任意網域名稱進行非同步請求，而我們的解決方案只能突破子網域名稱的限制。
　　那麼現在來看看我們的做法！

優雅地突破子網域名稱的限制
　　我們突破子網域名稱限制的關鍵還是在於iframe。
　
　iframe是的好東西，我們能夠跨過子網域名稱來訪問iframe裡的頁面對象，例如
window和DOM結構，包括調用JavaScript（通過window對象）——我們將內外頁面的
document.domain設定成相同就可以了。然後在不同子網域名稱的頁面發起不同的請求，把結果通過JavaScript進行傳遞即可。唯一需要的也僅
僅是一個簡單的靜態頁面作為Proxy而已。
　　我們現在就來開始編寫一個原形，雖然簡單，但是可以說明問題。
　　首先，我們先來編寫一個靜態頁面，作為放在iframe裡的Proxy，如下：
SubDomainProxy.html

[複製此代碼]CODE:<html xmlns=“http://www.w3.org/1999/xhtml” >
<head>
<title>Untitled Page</title>
<script type=“text/javascript” language=“javascript”>
document.domain = “test.com“; function sendRequest(method, url)
{
var request = new XMLHttpRequest();
request.open(method, url);
request.send(null);
}
</script>
</head>
<body>
</body>
</html>

　　然後我們再編寫我們的首頁面：

http://www.test.com/Default.html

[複製此代碼]CODE:<html xmlns=“http://www.w3.org/1999/xhtml” >
<head runat=“server”>
<title>Untitled Page</title>
<script type=“text/javascript” language=“javascript”>
document.domain = “test.com“; function simpleRequest()
{
var request = new XMLHttpRequest();
request.open(”POST“, “Script.ashx“);
request.send(null);
}
function crossSubDomainRequest()
{
var proxy = document.getElementById(”iframeProxy“).contentWindow;
proxy.sendRequest('POST', ‘http://sub0.test.com/Script.ashx‘);
}
function threeRequests()
{
simpleRequest();
simpleRequest();
crossSubDomainRequest();
}
</script>
</head>
<body>
<input type=“button” value=“Request” onclick=“threeRequests()” />
<iframe src=“http://sub0.test.com/SubDomainProxy.html” style=“display:none;”
id=“iframeProxy”></iframe>
</body>
</html>

　　當執行threeRequests方法時，將會同時請求http://www.test.com以及http://sub0.test.com兩個不同網域名稱下的資源。很明顯，最後一個請求已經不會受到前兩個請求的阻塞了：

不同網域名稱的請求不會被阻塞
　　令人滿意的結果！
　
　雖說只能突破子網域名稱，但是這已經足夠了，不是嗎？我們為什麼要強求任意網域名稱之間能夠非同步通
訊呢？更何況我們的解決方案是多麼的優雅！在下一篇文章中，我們將會為ASP.NET
AJAX用戶端實現一個完整的CrossSubDomainRequestExecutor，它會自動判斷是否正在發出跨子網域名稱的請求，並選擇AJAX請
求的方式。這樣，用戶端的非同步通訊層就會對開發人員完全透明。世上還會有比這更令人愉快的事情嗎？:)
注意事項
　　可能以下幾點值得一提：
我在出現這個想法之後也作了一些嘗試，最後發現建立XMLHttpRequest對象，調用open方法和send方法都必須在iframe中的頁面中執行才能夠在IE和FireFox中成功發送AJAX請求。
在
上面的例子中，我們向子網域名稱請求的的路徑是http://sub0.test.com/Script.ashx。請注意，完整的子網域名稱不可以省略，否則在
FireFox下就會出現許可權不夠的錯誤，在調用open方法時就會拋出異常——似乎FireFox把它當作了父頁面網域名稱的資源了。
因為瀏覽
器的安全性原則，瀏覽器不允許不同域(比如：phinest.org和lab.phinest.org)、不同協議(比如:

http://phinest.org和https://phinest.org)、不同連接埠(比如:http:

phinest.org和http://phinest.org:8080)下的頁面通過XMLHTTPRequest相互訪問，這個問題同樣影響著不同
頁面的Javascript的相互調用和控制，但是當主域、協議、連接埠相同時，通過設定頁面的document.domain主域，
Javascript可以在不同的子網域名稱間存取控制，比如通過設定document.domain='phinest.org'，http:
//phinest.org和http://lab.phinest.org頁面可互訪，這個特性也提供了此情況下不同子網域名稱下的
XMLHTTPRequest相互訪問的解決方案。
對於主域、協議、連接埠相同時的Ajax跨域問題，很早就有設定
document.domain來解決的說法，但一直沒有看到具體的成功應用，這次嘗試了一下，其原理就是，利用一個隱藏的iframe引入所跨另一子域
的頁面作為代理，通過Javascript來控制iframe引入的另一子域的
XMLHTTPRequest來進行資料擷取。對於不同主域/不同協議/不同連接埠下的Ajax訪問需要通過背景代理來實現。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More