javascript跨域的幾種方法

he_xd 發(fā)布于2019-08-21 10:43 / 1843人閱讀

摘要：在支持這個方式的瀏覽器里，的寫法和不跨域的寫法一模一樣，只要服務器需要設置這種方式適用于主域相同，子域不同，比如和假如這兩個域名下各有和在這里操作里的元素數(shù)據(jù)注意需要設置成自身或更高一級的父域，且主域必須相同。

打個招聘廣告：杭州阿里巴巴B2B 招前端（想去西溪的也可幫推薦），比較缺人，機會多多！廣告位長期有效，有興趣簡歷我郵箱：[email protected]

此文章學習借鑒了一些其他前端同學的文章，自己做了個實踐總結

以下的例子包含的文件均為為 http://www.a.com/a.html 、http://www.a.com/c.html 與 http://www.b.com/b.html，要做的都是從a.html獲取b.html里的數(shù)據(jù)

1.JSONP

jsonp是利用script標簽沒有跨域限制的特性，通過在src的url的參數(shù)上附加回調函數(shù)名字，然后服務器接收回調函數(shù)名字并返回一個包含數(shù)據(jù)的回調函數(shù)

    function doSomething(data) {
        // 對data處理
    }
    var script = document.createElement("script");
    script.src = "http://www.b.com/b.html?callback=doSomething";
    document.body.appendChild(script);

    // 1.生成一個script標簽，將其append在body上，向服務器發(fā)出請求
    // 2.服務器根據(jù) callback 這個參數(shù)生成一個包含數(shù)據(jù)的函數(shù) doSomething({"a", "1"})
    // 3.頁面事先已聲明doSomething函數(shù)，此時執(zhí)行 doSomething(data) 這個函數(shù)，獲得數(shù)據(jù)

2.HTML5的postMessage

假設在a.html里嵌套個,在這兩個頁面里互相通信

a.html

    window.onload = function() {
        window.addEventListener("message", function(e) {
            alert(e.data);
        });

        window.frames[0].postMessage("b data", "http://www.b.com/b.html");
    }

b.html

    window.onload = function() {
        window.addEventListener("message", function(e) {
            alert(e.data);
        });
        window.parent.postMessage("a data", "http://www.a.com/a.html");
    }

這樣打開a頁面就先彈出 a data,再彈出 b data

3.window.name + iframe

window.name的原理是利用同一個窗口在不同的頁面共用一個window.name，這個需要在a.com下建立一個代理文件c.html,使同源后a.html能獲取c.html的window.name

a.html

    var iframe = document.createElement("iframe");
    iframe.src = "http://www.b.com/b.html";
    document.body.appendChild(iframe); // 現(xiàn)在a.html里建一個引用b.html的iframe，獲得b的數(shù)據(jù)

    var flag = true;
    iframe.onload = function() {
        if (flag) {
            iframe.src = "c.html";  
// 判斷是第一次載入的話，設置代理c.html使和a.html在同目錄同源，這樣才能在下面的else取到data
            flag = false;
        } else { // 第二次載入由于a和c同源，a可以直接獲取c的window.name
            alert(iframe.contentWindow.name);

            iframe.contentWindow.close();
            document.body.removeChild(iframe);
            iframe.src = "";
            iframe = null;
        }
    }

b.html

window.name = "這是 b 頁面的數(shù)據(jù)";

4.window.location.hash + iframe

b.html將數(shù)據(jù)以hash值的方式附加到c.html的url上，在c.html頁面通過location.hash獲取數(shù)據(jù)后傳到a.html(這個例子是傳到a.html的hash上，當然也可以傳到其他地方)

a.html

    var iframe = document.createElement("iframe");
    iframe.src = "http://www.b.com/b.html";
    document.body.appendChild(iframe); // 在a頁面引用b
    function check() { // 設置個定時器不斷監(jiān)控hash的變化，hash一變說明數(shù)據(jù)傳過來了
        var hashs = window.location.hash;
        if (hashs) {
            clearInterval(time);
            alert(hashs.substring(1));
        }
    }
    var time = setInterval(check, 30);

b.html

    window.onload = function() {
        var data = "this is b"s data"; 
        var iframe = document.createElement("iframe");
        iframe.src = "http://www.a.com/c.html#" + data;
        document.body.appendChild(iframe); // 將數(shù)據(jù)附加在c.html的hash上
    }

c.html

// 獲取自身的hash再傳到a.html的hash里，數(shù)據(jù)傳輸完畢
parent.parent.location.hash = self.location.hash.substring(1);

5.CORS

CORS是XMLHttpRequest Level 2 里規(guī)定的一種跨域方式。在支持這個方式的瀏覽器里，javascript的寫法和不跨域的ajax寫法一模一樣，只要服務器需要設置Access-Control-Allow-Origin: *

6.document.domain

這種方式適用于主域相同，子域不同，比如http://www.a.com和http://b.a.com
假如這兩個域名下各有a.html 和b.html,

a.html

    document.domain = "a.com";
    var iframe = document.createElement("iframe");
    iframe.src = "http://b.a.com/b.html";
    document.body.appendChild(iframe);
    iframe.onload = function() {
        console.log(iframe.contentWindow....); // 在這里操作b.html里的元素數(shù)據(jù)
    }

b.html

    document.domain = "a.com";

注意：document.domain需要設置成自身或更高一級的父域，且主域必須相同。

云服務器 GPU云服務器 js緩存的幾種方法最基本的幾種 html的幾種輪播 js的幾種數(shù)據(jù)類型

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/86082.html

總結跨域的幾種方式

摘要：比如域的頁面通過嵌入了一個域的頁面，可以通過以下方法實現(xiàn)和的通信通過跨域以上幾種都是雙向通信的，即兩個，頁面與或是頁面與頁面之間的，下面說幾種單項跨域的一般用來獲取數(shù)據(jù)，因為通過標簽引入的是不受同源策略的限制的。跨域整理@(前端筆記) 跨域只要協(xié)議、域名、端口有任何一個不同，都被當作是不同的域。由于瀏覽器的同源策略，其限制之一是不能通過ajax的方法情趣請求不同源的文檔。第二個限制...

diabloneo 2019-08-21 17:52 評論0 收藏0
Web開發(fā)之跨域與跨域資源共享

摘要：例外當涉及到同源策略時，有兩個主要的例外授信范圍兩個相互之間高度互信的域名，如公司域名，不遵守同源策略的限制。端口未將端口號加入到同源策略的組成部分之中，因此和屬于同源并且不受任何限制。原文鏈接：http://www.devsai.com/2016/11/24/talk-CORS/ 同源策略（same origin policy） 1995年，同源政策由 Netscape 公司引入瀏...

Eastboat 2019-08-20 12:29 評論0 收藏0
什么是跨域以及幾種簡單解決方案

摘要：什么是跨域要明白什么是跨域之前，首先要明白什么是同源策略同源策略就是用來限制從一個源加載的文檔或腳本與來自另一個源的資源進行交互。最后，解決跨域問題還有一個更通用更強大的方法，我單獨把它拿出來總結了一篇文章跨域問題的根本解決方案。什么是跨域？要明白什么是跨域之前，首先要明白什么是同源策略？同源策略就是用來限制從一個源加載的文檔或腳本與來自另一個源的資源進行交互。那怎樣判斷是否是同...

zhaofeihao 2019-08-26 11:44 評論0 收藏0
JSONP的一點筆記<修改中>

摘要：請求服務器數(shù)據(jù)并規(guī)定回調函數(shù)為上面代碼通過動態(tài)添加元素，向服務器發(fā)出請求。另外假設向服務發(fā)送的請求是這樣的在這種情況下，是表示請求的請求參數(shù)，而是應用程序的回調函數(shù)的名稱。清單調用回調服務注意，我們使用作為回調函數(shù)名，而非真實的函數(shù)名。同源策略同源策略(Same origin policy)，它是由Netscape提出的一個著名的安全策略。現(xiàn)在所有支持JavaScript的瀏覽器都...

姘存按 2019-08-20 17:22 評論0 收藏0
Spring Boot 2.x（九）：遇到跨域不再慌

什么是跨域首先，我們需要了解一下一個URL是怎么組成的： // 協(xié)議 + 域名（子域名 + 主域名） + 端口號 + 資源地址 http: + // + www.baidu.com + :8080/ 只要協(xié)議，子域名，主域名，端口號這四項組成部分中有一項不同，就可以認為是不同的域，不同的域之間互相訪問資源，就被稱之為跨域。隨著前后端分離開發(fā)的越來越普及，會經(jīng)常遇到跨域的問題，當我們在瀏覽...

余學文 2019-08-19 10:17 評論0 收藏0