window.name 跨域实现原理及实例

原创 2016年11月08日 14:30:17

先引用一段话:

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")[0];

            a.onclick=function(){                               //button添加click事件
                var inf=document.createElement("iframe");       //创建iframe
                inf.src="http://www.domain.com/window.name/b.html"+"?h=5"  //加载数据页www.domain.com/window.name/b.html同事携带参数h=5
                var body=document.getElementsByTagName("body")[0];
                body.appendChild(inf);                          //引入a页面

                inf.onload=function(){
                    inf.src='http://www.test.com/b.html'       //iframe加载完成,加载www.test.com域下边的空白页b.html
                    console.log(inf.contentWindow.name)        //输出window.name中的数据
                    body.removeChild(inf)                      //清除iframe
                }
            }

        </script>
    </body>
</html>

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得来的数据。

结束!

版权声明:本文为博主原创文章,未经博主允许不得转载。

跨域解决方法之window.name

window.name 跨域请求 方法
  • u013558749
  • u013558749
  • 2017年02月24日 23:54
  • 1227

使用 window.name 解决跨域问题

window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法的复杂...
  • fengri5566
  • fengri5566
  • 2016年08月03日 17:27
  • 4730

Windows程序内部运行原理

原文:http://www.cnblogs.com/kerwinshaw/articles/1257187.html 为了理解Visual C++应用程序开发过程,先要理解Windows程序的运...
  • gongda2014306
  • gongda2014306
  • 2016年11月14日 16:11
  • 1135

WINDOWS程序内部运行原理

API(Application programming interface) 应用程序编程的接口 MSG(message)  消息结构体    操作系统将每一个事件包装成一个称为消息MSG的结构体...
  • testcs_dn
  • testcs_dn
  • 2012年06月05日 16:00
  • 7285

iframe 中使用 window.name

iframe 中使用 window.name
  • masm611masm
  • masm611masm
  • 2016年04月13日 22:51
  • 408

window.name实现ajax跨域post请求

不得不佩服想出用window.name来传数据的人
  • helloint
  • helloint
  • 2010年07月19日 22:02
  • 1551

Android源码解析Window系列第(三)篇---WindowManager基本原理

前面的两篇博客,总结了一下Window的基本知识,我们知道Window是一个抽象的概念,每一个Window都对应着一个View,Window的呈现方式是View,View要依赖Window,View和...
  • u013263323
  • u013263323
  • 2016年12月13日 21:47
  • 1567

常见的跨域方式及原理-第一篇

跨域:通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据或者通过js获取页面中不同域的框架(iframe)中的数据。只要协议、域名、端口有任何一个不同,都被当作是跨域。下表...
  • llm913114267
  • llm913114267
  • 2017年03月29日 17:05
  • 325

window.name实现的跨域数据传输

这篇文章是对 JavaScript跨域总结与解决办法 的补充。 有三个页面: a.com/app.html:应用页面。 a.com/proxy.html:代理文件,一般是一个没有任何...
  • bao19901210
  • bao19901210
  • 2014年03月18日 14:28
  • 7471

window.name实现跨域请求

如a.com网站想通过JS获取b.com网站的数据。 1 在a.com网站添加一个空HTML页。名称为:http://a.com/null.html 2 在a.com网站需要获取数据页面(如:ht...
  • u012545279
  • u012545279
  • 2014年02月26日 11:24
  • 1340
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:window.name 跨域实现原理及实例
举报原因:
原因补充:

(最多只允许输入30个字)