Question

我正在努力弄清楚为什么我的代码以特定方式工作（而不是以其他方式）：

+----------------------------+
| jsfiddle                   |
|                            |
|              +---------+   |
|              |         |   |
|              |  jsbin  |   |
|              +---------+   |    
+----------------------------+

目标：

jsfiddle应该使用jsbin（跨域技术）连接到jsbin和jsfiddle，将数据返回window.name。

（再次 - 代码正常运行）

jsbin's响应是一个Html页面：

  <script>
      window.name = 1*(new Date());
  </script>

以下是jsFiddle的代码：

/*1*/   var f;
/*2*/   
/*3*/   function loadRequest()
/*4*/   {
/*5*/       f.onload = function ()
/*6*/       {
/*7*/           alert(f.contentWindow.name);
/*8*/           frame.parentNode.removeChild(frame);
/*9*/       }
/*10*/       f.src = 'about:blank';
/*11*/   }
/*12*/   
/*13*/   $(".b").on('click', function ()
/*14*/   {
/*15*/       f = document.createElement('iframe');
/*16*/       f.name = framename = 'fetchData';
/*17*/       f.onload = loadRequest;
/*18*/       f.src = 'http://jsbin.com/AjUyoYU/8/quiet';
/*19*/       document.body.appendChild(f);
/*20*/   });

正如您所看到的 - 代码有效： http://jsfiddle.net/7Nawt/2/

那么问题在哪里？

查看第17行，我执行为onload附加iframe处理程序。（loadRequest）。

但loadRequest方法 - 反过来 - 再次使用（!! - line＃5） onload函数。

我不明白为什么这样工作。

我的意思是：常识告诉我loadRequest方法应该是：

function loadRequest()
    { 
             alert(f.contentWindow.name);
             frame.parentNode.removeChild(frame);
    }

但它没有用。

我错过了什么？ （显示任何其他尝试：跨域错误）

Answer 1

在检查window.name之前，您需要将iframe窗口发送回父窗口可访问的域，否则您将收到跨域错误。因此，在加载并且远程页面设置为window.name之后，您将其发送到about:blank，该window.name不受同源策略的约束，然后从父窗口读取window.name

这里的第一个技巧是window.name无论你在哪里发送窗口都会坚持到底。因此，您将窗口发送到远程域，让它设置为about:blank，将其发送回可访问的域，然后阅读。

第二个技巧是A是B和{{1}}的愉快环境。所以 - 没有跨域错误。

使用window.name的跨域 - 应该使用double onload吗？

1 个答案: