参考: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>

window.name跨域实现的更多相关文章

  1. window.name 跨域

    跨域的由来 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但是我们常常会遇到无法避免跨域的情况,如普通文章站点(article.xxx.com)需要评论,而评论站点却在chea ...

  2. JS window.name跨域封装

    JS window.name 跨域封装 function CrossDomainName(target, agent, callback, security) { if (typeof target ...

  3. window.name跨域

    window.name? 每一个页面都有一个自己的window,而window.name是window的名字. window.name跨域原理 window对象有个name属性,该属性有个特征:即在一 ...

  4. window.returnValue跨域传值问题[转]

    主页面用window.showModalDialog的时候,如果直接打开其它系统的页面,这时候别人的页面在window.returnValue=1;这样返回值的时候,主页面是取不到返回值的,原因就是因 ...

  5. HTML5 window/iframe跨域传递消息 API

    原文地址:HTML5′s window.postMessage API 在线示例:Using HTML5's window.postMessage(请打开控制台看日志) 原文日期: 2010年09月0 ...

  6. (二)文档请求不同源之window.name跨域

    一.基本原理 window.name不是一个普通的全局变量,而是当前窗口的名字.这里要注意的是每个iframe都有包裹它的window,而这个window 是top window的子窗口,而它自然也有 ...

  7. (二)文档请求不同源之window.postMessage跨域

    一.基本原理 HTML5为了解决跨域,引入了跨文档通信API(Cross-document messaging).这个API为window对象新增了一个window.postMessage方法,允许跨 ...

  8. window.name 跨域数据传输

    通过window.name可以实现跨域数据传输. 要解决的功能:  www.a.com/a.html 需要获取到 www.b.com/b.html页面内容的数据 需要3个页面 www.a.com/a. ...

  9. HTML5之worker开启JS多线程模式及window.postMessage跨域

    worker概述 worker基本使用 window下的postMessage worker多线程的应用 一.worker概述 web worker实际上是开启js异步执行的一种方式.在html5之前 ...

随机推荐

  1. SQL2008R2 express版本不支持维护计划

    SQL2008R2 express版本不支持维护计划

  2. 2018 Jar_Feb_Newwords

    检测钩子程序 开发一个检测钩子程序的工具 - 豆丁网http://www.docin.com/p-1363993661.html pdf掺杂病毒的方法 Java的:xml文件中跳过的二进制数据在解析 ...

  3. Delphi操作Excel(Use Oel)

    Use ComObj: procedure TorderMore1.BitBtn2Click(Sender: TObject);var  xlsFile:WideString;  var ExcelA ...

  4. html5中的SessionStorage 和localStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

  5. 关于struts.xml配置文件的说明

    <struts> <!-- action: 对应controller 中的类的 name: 匹配url要访问的类 class:包名+类名 通过反射产生对象 method:指定默认访问 ...

  6. pyplot-常用图表

    pyplot-常用图表 介绍最常用的:折线图.散点图.柱状图.直方图.饼图 的绘制 需要学习的不只是如何绘图,更是什么样的数据用什么图表显示效果最好 折线图 折线图用于显示随时间或有序类别的变化趋势 ...

  7. conductor FAQ

    在一段时间后(如1小时,1天等),您如何安排将任务放入队列中? 轮询任务后,更新任务的状态IN_PROGRESS并将其callbackAfterSeconds设置为所需的时间.任务将保留在队列中,直到 ...

  8. ubuntu修改运行级别方法

    Ubuntu系统设置启动级别的问题,因自己以前遇到过,故做过笔记记录了下来:Ubuntu.Debian系列与RedHat.CentOS启动级别含义有所区别:Ubuntu系列运行级别定义如下:0 – H ...

  9. vs2010+Aspx进行sharepoint2010工作流开发(3) 资料整理

    http://www.cnblogs.com/janet/archive/2010/04/24/1719315.html http://www.cnblogs.com/poissonnotes/arc ...

  10. Idea多个module下maven的pom.xml失效的问题

    今天在Idea中配置spring-cloud时,配置了两个module,结果其中一个module的pom.xml失效了.. 解决方法: 1.点击Idea右侧的Maven Project 2.点击&qu ...