django做服務端 window.name javascript跨域實現原理及實例
阿新 • • 發佈：2017-06-04
字符串 tex 並且 ble blog char src 兩個 splay 
項目地址：https://github.com/blff122620/jsLibary/tree/master/crossDomainDemo
原理如下：window.name 傳輸技術，原本是 Thomas Frank 用於解決 cookie 的一些劣勢（每個域名 4 x 20 Kb 的限制、數據只能是字符串、設置和獲取 cookie 語法的復雜等等）而發明的（詳細見原文：《Session variables without cookies》），後來 Kris Zyp 在此方法的基礎上強化了 window.name 傳輸 ，並引入到了 Dojo （dojox.io.windowName），用來解決跨域數據傳輸問題。 首先，我們要知道關於window.name的這樣一個特性：name 值在不同的頁面（甚至不同域名）加載後依舊存在，並且可以支持非常長的 name 值（2MB）。換句話說，name屬性不會因為頁面的url變化而變化，這就給跨域提供了機會。 我們可以在源頁面中利用iframe標簽嵌套要請求的目標頁面，在目標頁面設置window.name屬性，即把要請求的信息賦給window.name。但是問題來了，兩個頁面處於不同域，源頁面並不能獲得目標頁面的name值，因為name值只對位於同一域中的頁面是可見的。此時，我們需要將iframe導航回與源頁面處於同一域中air.html頁面（即一個空頁面，在這裏充當一個中轉的角色），上面說了這時候的name值依舊保持不變，那麽我們就可以獲取到它了。
1 var getCORData = function(url,ghostUrl,callback){ 2 var iframe = document.createElement("iframe"); 3 iframe.style.display = "none"; 4 iframe.src = url; 5 var body = document.body, 6 state = 0 ; 7 8 iframe.onload = functionrequest.html(){ 9 if(state == 1){ 10 callback(iframe.contentWindow.name); 11 body.removeChild(iframe);//移除iframe，清理出內存 12 } 13 //這裏是第一次跨域請求結束後，將src指定為ghost頁面，這是因為name值只對位於同一域中的頁面是可見的 14 else if(state == 0){ 15 iframe.src = ghostUrl;//這裏可以替換為自己的代理空頁面 16 17 state = 1; 18 } 19 }; 20 body.appendChild(iframe); 21 }; 22 window.onload = function(){ 23 $$("#start").value = window.location.protocol + "//" + window.location.host + "/ghost"; 24 $$("button").onclick=function(){ 25 26 getCORData($$("#end").value,$$("#start").value ,function(data){ 27 var outcome = JSON.parse(data);//這裏接收傳過了json格式的string 28 $$("#result").innerHTML = outcome.result; 29 }); 30 31 32 }; 33 };
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>data</title> </head> <body> <script type="text/javascript"> var data = {{data|safe}}; window.name = JSON.stringify(data); </script> </body> </html>
django做服務端 window.name javascript跨域實現原理及實例