window.name跨域实现

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

有三个页面：

• a.com/app.html：应用页面。
• a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。
• b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。

原理： a.com/app.html 中通过javascript创建iframe，并将location指向b.com/data.html，

　　　 并监听iframe的dom onload，

　　　 加载完毕后修改location指向a.com/proxy.html

实现步骤：

　　1. a.com/app.html 的head元素中一段javascript代码

　　<script type="text/javascript">
　　 window.onload = function(){
 　　 var state = 0,
 　　 iframe = document.createElement('iframe'),
 　　 iframe.src = 'b.com/data.html'; // 这里会触发onload事件

　　 loadfn = function() {
  　　 if (state == 1) {
   　　   var data = iframe.contentWindow.name;    // 读取数据
    　　  alert(data);    //弹出 'xxxxx'
　　　　 // 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）。
   　　   iframe.contentWindow.document.write('');
   　　   iframe.contentWindow.close();
     　　 document.body.removeChild(iframe);
 　　  } else if (state == 0) {
 　　     state = 1;
 　　     iframe.contentWindow.location = "a.com/proxy.html";    // 设置的代理文件，再次触发onload事件，

　　　　// 如果不指向本域，由于跨域访问限制原因，window.name还是无法访问的，
　　   } 
　　  };
  　　if (iframe.attachEvent) {
   　　  iframe.attachEvent('onload', loadfn);
 　　 } else {
  　　   iframe.onload  = loadfn;
 　　 }
 　　 document.body.appendChild(iframe);
 　　};
 　　</script>

　　

　　2.  b.com/data.html 设置数据

　　<script type=”text/javascript” >

　　　　window.name=”xxxxx”;

　　　/* xxxxx就是要传输的数据。将数据放到window.name中供不同域的web程序使用；

　　　　   数据大小限制不同浏览器要求不同  ie ,firefox貌似为32m，其余为2m好像 ，类型可为json,字符串*/

　　</script>

　　3. a.com/proxy.html 不需要有任何代码

总结：iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。

　　　这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

附：iframe加载跨域文件，高度自适应：

1、a.com/app.html 的javascript代码

<script type="text/javascript">

$(function(){

　　iframeAutoHeight();

});

function iframeAutoHeight(){
   var state = 0;
   loadfn = function(ifmId,url){
    iframe = document.getElementById(ifmId);
    if (state == 1) {
     var data = iframe.contentWindow.name;    // 2、读取跨域传递的数据，此处name中为加载内容的窗口高度 
     iframe.height = data-0;
     state = 2;
     iframe.src = url;                                      // 3、指回跨域文件路径
    } else if (state == 0) {
     state = 1;
     iframe.contentWindow.location = "a.com/proxy.html";    /* 1、设置的代理文件，

　　　　　　　　　　　　　　　　　　　　　　　　　　是为了 "var data = iframe.contentWindow.name;"能正常执行 */
    } 
   }
   $("iframe[linkURL]").each(function(){ // 只对特定条件的iframe绑定onload事件：此处为有自定义属性"linkURL"
    var iframe = $(this);
    var ifmId = iframe.attr("id");
    var url = iframe.attr("linkURL");  // linkURL 为iframe自定义一个属性，存放跨域地址，此处为：b.com/data.html
    iframe.on("load",function(){
     loadfn(ifmId,url);
    });
   });
  }

</script>

　a.com/app.html的html部分：

　　<iframe src="b.com/data.html" linkURL="b.com/data.html"></iframe>

2、 b.com/data.html 设置数据

<script type="text/javascript">
  $(function(){
  　 iframeHeight();
  });
  function iframeHeight(){
   var doc = window.document,
   html = doc.documentElement,
   body = doc.body;
   var height = Math.max( body.scrollHeight, body.offsetHeight,
          html.clientHeight, html.scrollHeight, html.offsetHeight );
   
   window.name = height; // 将高度存放到window.name中进行跨域传输
  }

</script>