JS跨域問題詳解
JavaScript是一種在Web開發(fā)中經(jīng)常使用的前端動(dòng)態(tài)腳本技術(shù)。在JavaScript中，有一個(gè)很重要的安全性限制，被稱為“Same-Origin Policy”（同源策略）。這一策略對于JavaScript代碼能夠訪問的頁面內(nèi)容做了很重要的限制，即JavaScript只能訪問與包含它的文檔在同一域下的內(nèi)容。
JavaScript這個(gè)安全策略在進(jìn)行多iframe或多窗口編程、以及Ajax編程時(shí)顯得尤為重要。根據(jù)這個(gè)策略，在baidu.com下的頁面中包含的JavaScript代碼，不能訪問在google.com域名下的頁面內(nèi)容；甚至不同的子域名之間的頁面也不能通過JavaScript代碼互相訪問。對于Ajax的影響在于，通過XMLHttpRequest實(shí)現(xiàn)的Ajax請求，不能向不同的域提交請求，例如，在abc.example.com下的頁面，不能向def.example.com提交Ajax請求，等等。
然而，當(dāng)進(jìn)行一些比較深入的前端編程的時(shí)候，不可避免地需要進(jìn)行跨域操作，這時(shí)候“同源策略”就顯得過于苛刻。本文就這個(gè)問題，概括了跨域所需要的一些技術(shù)。
下面我們分兩種情況討論跨域技術(shù)：首先討論不同子域的跨域技術(shù)，然后討論完全不同域的跨域技術(shù)。
（一）不同子域的跨域技術(shù)。
我們分兩個(gè)問題來分別討論：第一個(gè)問題是如何跨不同子域進(jìn)行JavaScript調(diào)用；第二個(gè)問題是如何向不同子域提交Ajax請求。
先來解決第一個(gè)問題，假設(shè)example.com域下有兩個(gè)不同子域：abc.example.com和def.example.com?，F(xiàn)在假設(shè)在def.example.com下面有一個(gè)頁面，里面定義了一個(gè)JavaScript函數(shù)：
function funcInDef() {
.....
}
我們想在abc.example.com下的某個(gè)頁面里調(diào)用上面的函數(shù)。再假設(shè)我們要討論的abc.example.com下面的這個(gè)頁面是以iframe形式嵌入在def.example.com下面那個(gè)頁面里的，這樣我們可能試圖在iframe里做如下調(diào)用：
window.top.funcInDef();
好，我們注意到，這個(gè)調(diào)用是被前面講到的“同源策略”所禁止的，JavaScript引擎會直接拋出一個(gè)異常。
為了實(shí)現(xiàn)上述調(diào)用，我們可以通過修改兩個(gè)頁面的domain屬性的方法做到。例如，我們可以將上面在abc.example.com和def.example.com下的兩個(gè)頁面的頂端都加上如下的JavaScript代碼片段：
<script type="text/javascript">
document.domain = "example.com";
</script>
這樣，兩個(gè)頁面就變?yōu)橥蛄?，前面的調(diào)用也可以正常執(zhí)行了。
這里需要注意的一點(diǎn)是，一個(gè)頁面的document.domain屬性只能設(shè)置成一個(gè)更頂級的域名（除了一級域名），但不能設(shè)置成比當(dāng)前域名更深層的子域名。例如，abc.example.com的頁面只能將它的domain設(shè)置成example.com，不能設(shè)置成sub.abc.example.com，當(dāng)然也不能設(shè)置成一級域名com。
上面的例子討論的是兩個(gè)頁面屬于iframe嵌套關(guān)系的情況，當(dāng)兩個(gè)頁面是打開與被打開的關(guān)系時(shí)，原理也完全一樣。
下面我們來解決第二個(gè)問題：如何向不同子域提交Ajax請求。
通常情況下，我們會用與下面類似的代碼來創(chuàng)建一個(gè)XMLHttpRequest對象：
factories = [
function() { return new XMLHttpRequest(); },
function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
];
function newRequest() {
for(var i = 0; i <</SPAN> factories.length; i++) {
try{
var factory = factories[i];
return factory();
} catch(e) {}
}
return null;
}
上面的代碼中引用ActiveXObject，是為了兼容IE6系列瀏覽器。每次我們調(diào)用newRequest函數(shù)，就獲得了一個(gè)剛剛創(chuàng)建的Ajax對象，然后用這個(gè)Ajax對象來發(fā)送HTTP請求。例如，下面的代碼向abc.example.com發(fā)送了一個(gè)GET請求：
假設(shè)上面的代碼包含在一個(gè)abc.example.com域名下的頁面里，則這個(gè)GET請求可以正常發(fā)送成功，沒有任何問題。然而，如果現(xiàn)在要向def.example.com發(fā)送請求，則出現(xiàn)跨域問題，JavaScript引擎拋出異常。
解決的辦法是，在def.example.com域下放置一個(gè)跨域文件，假設(shè)叫crossdomain.html；然后將前面的newRequest函數(shù)的定義移到這個(gè)跨域文件中；最后像之前修改document.domain值的做法一樣，在crossdomain.html文件和abc.example.com域下調(diào)用Ajax的頁面頂端，都加上：
<script type="text/javascript">
document.domain = "example.com";
</script>
為了使用跨域文件，我們在abc.example.com域下調(diào)用Ajax的頁面中嵌入一個(gè)隱藏的指向跨域文件的iframe，例如：
[code]
<iframe name="xd_iframe" style="display:none" src=">
這時(shí)abc.example.com域下的頁面和跨域文件crossdomain.html都在同一個(gè)域（example.com）下，我們可以在abc.example.com域下的頁面中去調(diào)用crossdomain.html中的newRequest函數(shù)：
var request = window.frames["xd_iframe"].newRequest();
這樣獲得的request對象，就可以向http://def.example.com發(fā)送HTTP請求了。
（二）完全不同域的跨域技術(shù)。
如果頂級域名都不相同，例如example1.com和example2.com之間想通過JavaScript在前端通信，則所需要的技術(shù)更復(fù)雜些。
在講解不同域的跨域技術(shù)之前，我們首先明確一點(diǎn)，下面要講的技術(shù)也同樣適用于前面跨不同子域的情況，因?yàn)榭绮煌佑蛑皇强缬騿栴}的一個(gè)特例。當(dāng)然，在恰當(dāng)?shù)那闆r下使用恰當(dāng)?shù)募夹g(shù)，能夠保證更優(yōu)的效率和更高的穩(wěn)定性。
簡言之，根據(jù)不同的跨域需求，跨域技術(shù)可以歸為下面幾類：
1、JSONP跨域GET請求
2、通過iframe實(shí)現(xiàn)跨域
3、flash跨域HTTP請求
4、window.postMessage
本文先到這里，后續(xù)我們再詳細(xì)介紹上面提到的4種跨域技術(shù)，稍后就奉上！
相關(guān)文章
JS Timing...2007-04-04
javascript窗口寬高,鼠標(biāo)位置,滾動(dòng)高度(詳細(xì)解析)
javascript窗口寬高,鼠標(biāo)位置,滾動(dòng)高度(詳細(xì)解析)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了javascript數(shù)組定義的幾種方法，一般來說分為隱式創(chuàng)建、直接實(shí)例化、創(chuàng)建數(shù)組并指定長度、后來為了方便直接使用json格式定義數(shù)組，這里腳本之家小編就為大家介紹一下，需要的朋友可以參考一下2017-10-10
詳解JavaScript編程中的數(shù)組結(jié)構(gòu)
這篇文章主要介紹了詳解JavaScript編程中的數(shù)組結(jié)構(gòu),是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-10-10
input按鈕的事件處理大全,收集的是網(wǎng)頁中常用的一些事件處理，需要的朋友可以收藏下。2010-12-12
這篇文章主要介紹了JavaScript的RequireJS庫入門指南,RequireJS庫的人氣近來攀升很快,需要的朋友可以參考下2015-07-07
深入理解javaScript中的事件驅(qū)動(dòng)
本篇文章是對javaScript中的事件驅(qū)動(dòng)進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-05-05
本文給大家詳細(xì)匯總了關(guān)于window.location.hash的知識點(diǎn)，屬性以及用法等等，非常的實(shí)用，并附上了例子，有需要的小伙伴可以參考下。2015-11-11
document.all與WEB標(biāo)準(zhǔn)
document.all與WEB標(biāo)準(zhǔn)...2006-11-11