django做服务端 window.name javascript跨域实现原理及实例

项目地址: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 = function(){
 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").οnclick=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 };
request.html

 

<!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>

 

转载于:https://www.cnblogs.com/beau30/p/6938847.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值