js實作跨域的多種方法_javascript技巧

從域說起

域： 域是WIN2K網路系統的安全性邊界。我們知道一個電腦網路最基本的單元就是“域”，這一點不是WIN2K所獨有的，但活動目錄可以貫穿一個或多個域。在獨立的電腦上，域即指電腦本身，一個域可以分佈在多個物理位置上，同時一個物理位置又可以劃分不同網段為不同的域，每個域都有自己的安全策略以及它與其他域的信任關係。當多個域透過信任關係連結起來之後，活動目錄可以被多個信任域共享
域樹：域樹由多個域組成，這些域共享同一表結構和配置，形成一個連續的名字空間。樹中的域透過信任關係連結起來，活動目錄包含一個或多個域樹。域樹中的領域是透過雙向可傳遞信任關係連結在一起。由於這些信任關係是雙向的而且是可傳遞的，因此在域樹或樹林中新建立的域可以立即與域樹或樹林中每個其他的域建立信任關係。這些信任關係允許單一登入過程，在網域樹或樹林中的所有網域上對使用者進行身份驗證，但這不一定意味著經過身份驗證的使用者在網域樹的所有網域中都擁有相同的權利和權限。因為網域是安全界限，所以必須在每個網域的基礎上為使用者指派相應的權利和權限。
域樹中的域層次越深層越低，一個「.」代表一個層次。
如域zhidao.baidu.com(百度知道)就比 baidu.com(百度)這個域級別低，因為它有兩個層次關係，而baidu.com只有一個層次。

何為跨域

預設情況下，，XHR 物件只能存取與包含它的頁面位於同一個網域中的資源。這種安全性策略可以預防某些惡意行為。但是，實現合理的跨域請求對開發某些瀏覽器應用程式也是至關重要的。
只要協定、網域、連接埠有任何一個不同，都被當作是不同的網域

例如在http://www.a.com/a.js 頁面向以下頁面發送一個ajax請求，以下是其請求結果及說明

對於連接埠和協定的不同，只能透過後台來解決。我們要解決的是網域不同的問題

如何跨域

(一) CORS(Cross-Origin Resource Sharing，跨源資源共享)

1.CORS（Cross-Origin Resource Sharing，跨來源資源共用）是W3C 的工作草案，定義了在必須存取跨來源資源時，瀏覽器與伺服器應該如何溝通。 CORS 背後的基本思想，就是使用自訂的HTTP 頭部讓瀏覽器與伺服器進行溝通，從而決定請求或回應是否應該成功，還是應該失敗。
2.實現此功能非常簡單，只需由伺服器發送回應標頭即可。

瀏覽器支援情況：

• IE 8+
• Firefox 3.5+
• Opera 12+
• Safari 4+
• Chrome 3+

假設我們頁面或應用程式已在 http://www.a.com/ 上了，而我們打算從 http://www.b.com 請求提取資料。一般情況下，如果我們直接使用 AJAX 來要求將會失敗，瀏覽器也會回傳錯誤。
利用 CORS，http://www.b.com 只需新增一個標頭，就可以允許來自 http://www.a.com 的請求。
以下是用php進行的設置，「*」號表示允許任何網域向我們的服務端提交請求：

header{"Access-Control-Allow-Origin: *"}

CORS的相容性寫法

 function createCORSRequest(method, url){
 var xhr = new XMLHttpRequest();
 //非IE浏览器
 if ("withCredentials" in xhr){
 xhr.open(method, url, true);
 //IE浏览器
 } else if (typeof XDomainRequest != "undefined"){
 vxhr = new XDomainRequest();
 xhr.open(method, url);
 } else {
 xhr = null;
 }
 return xhr;
 }
 var request = createCORSRequest("get", "http://www.somewhere-else.com/page/");
 if (request){
 request.onload = function(){
 //对request.responseText 进行处理
 };
 request.send();
 }

(二) JSONP(JSON with Padding 填充式JSON 或參數式JSON)

在js中，我們雖然不能直接用XMLHttpRequest請求不同域上的資料時，但是在頁面上引入不同域上的js腳本檔案卻是可以的，jsonp正是利用這個特性來實現的

JSONP由兩部分組成：回呼函數和資料。回呼函數是當回應到來時應該在頁面中呼叫的函數，而資料就是傳入回呼函數中的JSON資料。

例如：

<script type="text/javascript">
 function dosomething(jsondata){
 //处理获得的json数据
 }
</script>
<script src="http://example.com/data.php&#63;callback=dosomething"></script>

首先第一个script便签定义了一个处理数据的函数;
然后第二个script标签载入一个js文件，http://example.com/data.php 是数据所在地址，但是因为是当做js来引入的，所以http://example.com/data.php 返回的必须是一个能执行的js文件;
最后js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以php应该是这样的

<&#63;php
$callback = $_GET['callback'];//得到回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
&#63;>

最终，输出结果为：dosomething(['a','b','c']);
从上面可以看出jsonp是需要服务器端的页面进行相应的配合的。

JSONP的优缺点
优点:

它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；
能够直接访问响应文本，支持在浏览器与服务器之间双向通信
缺点：

JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的Web 服务时，一定得保证它安全可靠。
它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
(三) window.name

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

这里有三个页面：

a.com/app.html：应用页面。
a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。
b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。

app.html

<iframe src="b.com/data.html" id="iframe"></iframe>
<script>
 var iframe = document.getElementById("iframe");
 iframe.src = "a.com/proxy.html";//这是一个与a.com/app.html同源的页面
 iframe.onload = function(){
 var data = iframe.contentWindow.name; //取到数据
 }

</script>

data.html

<script>
 // 这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右
 // 数据格式可以自定义，如json、字符串
 window.name = "数据"
</script>

iframe首先的地址是b.com/data.html，所以能取到window.name数据;
但是iframe现在跟app.html并不同源，app.html无法获取到数据，所以又将iframe的链接跳转至a.com/proxy.html这个代理页面，现在app.html跟iframe就同源了。

注意：iframe由b.com/data.html跳转到a.com/proxy.html页面，window.name的value是不变的

获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）

<script type="text/javascript">
 iframe.contentWindow.document.write('');
 iframe.contentWindow.close();
 document.body.removeChild(iframe);
</script>

(四) document.domain + iframe

对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。
具体的做法是可以在http://www.a.com/a.html 和http://script.a.com/b.html 两个文件中分别设置document.domain = 'a.com'，然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。
http://www.a.com/a.html页面

<iframe src="http://script.a.com/b.html" frameborder="0"></iframe>
<script>
 document.domain = 'a.com';
</script>

http://script.a.com/b.html页面

<script>
 document.domain = 'a.com';
</script>

这样俩个页面就可以通过js相互访问各种属性和对象了。

document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个，但是不可以设成 c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。

(五) HTML5的window.postMessage

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
window.postMessage允许两个窗口/帧之间跨域发送数据消息。从本质上讲，window.postMessage是一个跨域的无服务器垫片的Ajax。

用法：
otherWindow.postMessage(message, targetOrigin);

• otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.+open的返回值；通过name或下标从window.frames取到的值。
• message: 所要发送的数据，string类型。
• targetOrigin: 用于限制otherWindow，“*”表示不作限制
  

数据发送端
a.com/index.html中的代码：

<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
 var ifr = document.getElementById('ifr');
 var targetOrigin = 'http://b.com'; // 设定接收端的域，*则为不限制
   
 ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>

数据接收端
b.com/index.html中的代码：

<script type="text/javascript">
 window.addEventListener('message', function(event){
 // 通过origin属性判断消息来源地址
 if (event.origin == 'http://a.com') {
 alert(event.data); // 弹出"I was there!"
 alert(event.source); // 对a.com、index.html中window对象的引用
   // 但由于同源策略，这里event.source不可以访问window对象
 }
 }, false);
</script>

以上就是js实现跨域的多种方法，希望对大家的学习有所帮助。