javascript跨域的方法匯總
此文章學(xué)習(xí)借鑒了一些其他前端同學(xué)的文章,自己做了個實踐總結(jié)
以下的例子包含的文件均為為 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標(biāo)簽沒有跨域限制的特性,通過在src的url的參數(shù)上附加回調(diào)函數(shù)名字,然后服務(wù)器接收回調(diào)函數(shù)名字并返回一個包含數(shù)據(jù)的回調(diào)函數(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標(biāo)簽,將其append在body上,向服務(wù)器發(fā)出請求 // 2.服務(wù)器根據(jù) callback 這個參數(shù)生成一個包含數(shù)據(jù)的函數(shù) doSomething({"a", "1"}) // 3.頁面事先已聲明doSomething函數(shù),此時執(zhí)行 doSomething(data) 這個函數(shù),獲得數(shù)據(jù)
2.HTML5的postMessage
假設(shè)在a.html里嵌套個<iframe src="
a.html b.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 b.html 4.window.location.hash + iframe b.html將數(shù)據(jù)以hash值的方式附加到c.html的url上,在c.html頁面通過location.hash獲取數(shù)據(jù)后傳到a.html(這個例子是傳到a.html的hash上,當(dāng)然也可以傳到其他地方) a.html b.html c.html 5.CORS CORS是XMLHttpRequest Level 2 里規(guī)定的一種跨域方式。在支持這個方式的瀏覽器里,javascript的寫法和不跨域的ajax寫法一模一樣,只要服務(wù)器需要設(shè)置Access-Control-Allow-Origin: * 6.document.domain 這種方式適用于主域相同,子域不同,比如http://www.a.com和http://b.a.com a.html b.html 注意:document.domain需要設(shè)置成自身或更高一級的父域,且主域必須相同。
window.onload = function() {
window.addEventListener("message", function(e) {
alert(e.data);
});
window.frames[0].postMessage("b data", "http://www.b.com/b.html");
}
window.onload = function() {
window.addEventListener("message", function(e) {
alert(e.data);
});
window.parent.postMessage("a data", "http://www.a.com/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";
// 判斷是第一次載入的話,設(shè)置代理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;
}
}
window.name = "這是 b 頁面的數(shù)據(jù)";
var iframe = document.createElement("iframe");
iframe.src = "http://www.b.com/b.html";
document.body.appendChild(iframe); // 在a頁面引用b
function check() { // 設(shè)置個定時器不斷監(jiān)控hash的變化,hash一變說明數(shù)據(jù)傳過來了
var hashs = window.location.hash;
if (hashs) {
clearInterval(time);
alert(hashs.substring(1));
}
}
var time = setInterval(check, 30);
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上
}
// 獲取自身的hash再傳到a.html的hash里,數(shù)據(jù)傳輸完畢
parent.parent.location.hash = self.location.hash.substring(1);
假如這兩個域名下各有a.html 和b.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ù)
}
document.domain = "a.com";
相關(guān)文章
document.all與getElementById、getElementsByName、getElementsByT
HTML DOM 定義了多種查找元素的方法,除了 getElementById() 之外,還有 getElementsByName() 和 getElementsByTagName()。2008-12-12抽出www.templatemonster.com的鼠標(biāo)懸停加載大圖模板的代碼
抽出www.templatemonster.com的鼠標(biāo)懸停加載大圖模板的代碼...2007-07-07如何在面試中手寫出javascript節(jié)流和防抖函數(shù)
這篇文章主要介紹了如何在面試中手寫出javascript節(jié)流和防抖函數(shù),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10