window.name 跨域實現原理及例項
阿新 • • 發佈：2019-02-19
先引用一段話：
window.name 傳輸技術，原本是 Thomas Frank 用於解決 cookie 的一些劣勢（每個域名 4 x 20 Kb的限制、資料只能是字串、設定和獲取 cookie 語法的複雜等等）而發明的。後來 Kris Zyp 在此方法的基礎上強化了 window.name 傳輸 ，用來解決跨域資料傳輸問題。
window.name 的美妙之處：name值在不同的頁面（甚至不同域名）載入後依舊存在，並且可以支援非常長的 name 值（2MB）。
window.name 傳輸技術的基本原理：
當在瀏覽器中開啟一個頁面，或者在頁面中新增一個iframe時即會建立一個對應的window物件，當頁面載入另一個新的頁面時，window的name屬性是不會變的。這樣就可以利用在頁面動態新增一個iframe然後src載入資料頁面，在資料頁面將需要的資料賦值給window.name。然而此時承載iframe的parent頁面還是不能直接訪問，不在同一域下iframe的name屬性，這時只需要將iframe再載入一個與承載頁面同域的空白頁面，即可對window.name進行資料讀取
示例：
www.test.com下a.html頁：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>click!</button>
<script type="text/javascript">
var a=document.getElementsByTagName("button" www.domain.com下b.html頁：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="" target="" title="">2</a>
<script type="text/javascript" src="../cross/jquery-2.2.3.js"></script>
<script>
var str=window.location.href.substr(-1,1); //獲取url中攜帶的引數值
$.ajax({
type:"get",
url:"http://www.domain.com/a.php"+"?m="+str, //通過ajax將查詢引數傳給php頁面
async:true,
success:function(res){
window.name=res //將接收到的查詢資料賦值給window.name
},
error:function(){
window.name='error' //..
}
});
</script>
</body>
</html>在www.test.com下a頁面點選button，完美跨域獲取到了www.domain.com下b頁面通過ajax請求從a.php得來的資料。
結束！