此文章學習借鑑了一些其餘前端同窗的文章,本身作了個實踐總結javascript
如下的例子包含的文件均爲爲 http://www.a.com/a.html
、http://www.a.com/c.html
與 http://www.b.com/b.html
,要作的都是從a.html
獲取b.html
裏的數據html
jsonp
是利用script
標籤沒有跨域限制的特性,經過在src
的url
的參數上附加回調函數名字,而後服務器接收回調函數名字並返回一個包含數據的回調函數前端
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上,向服務器發出請求 // 2.服務器根據 callback 這個參數生成一個包含數據的函數 doSomething({"a", "1"}) // 3.頁面事先已聲明doSomething函數,此時執行 doSomething(data) 這個函數,得到數據
假設在a.html
裏嵌套個<iframe src="http://www.b.com/b.html" frameborder="0"></iframe>
,在這兩個頁面裏互相通訊java
a.htmlajax
window.onload = function() { window.addEventListener("message", function(e) { alert(e.data); }); window.frames[0].postMessage("b data", "http://www.b.com/b.html"); }
b.htmljson
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
跨域
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); // 如今a.html裏建一個引用b.html的iframe,得到b的數據 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.htmlapp
window.name = "這是 b 頁面的數據";
b.html
將數據以hash
值的方式附加到c.html
的url
上,在c.html
頁面經過location.hash
獲取數據後傳到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() { // 設置個定時器不斷監控hash的變化,hash一變說明數據傳過來了 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); // 將數據附加在c.html的hash上 }
c.html
// 獲取自身的hash再傳到a.html的hash裏,數據傳輸完畢 parent.parent.location.hash = self.location.hash.substring(1);
CORS
是XMLHttpRequest Level 2
裏規定的一種跨域方式。在支持這個方式的瀏覽器裏,javascript
的寫法和不跨域的ajax
寫法如出一轍,只要服務器須要設置Access-Control-Allow-Origin: *
這種方式適用於主域相同,子域不一樣,好比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裏的元素數據 }
b.html
document.domain = "a.com";
注意:document.domain
須要設置成自身或更高一級的父域,且主域必須相同。