使用window.name进行跨域-应该使用double onload吗? [英] Cross domain using window.name -- double onload should be used?

问题描述

我正在努力找出为什么我的代码以特定方式(而不是其他方式)工作的原因:

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

目标:

jsfiddle 应该连接到 jsbin ， jsbin 应该返回数据到 jsfiddle 使用 window.name (跨域技术).

(再次-代码正在运行)

jsbin的响应是一个带有以下内容的HTML页面:

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

这是 jsFiddle 的代码:

 /* 1 */var f;/* 2 *//* 3 */函数loadRequest()/* 4 */{/* 5 */f.onload =函数()/* 6 */{/* 7 */alert(f.contentWindow.name);/* 8 */frame.parentNode.removeChild(frame);/* 9 */}/* 10 */f.src ='about:blank';/* 11 */}/* 12 *//* 13 */$(.b").on('click'，函数()/* 14 */{/* 15 */f = document.createElement('iframe');/* 16 */f.name =框架名称='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行，我做为 iframe 附加 onload 处理程序.( loadRequest ).

但是 loadRequest 方法-依次--attach (!! --line#5)一个 onload 函数.

我不明白为什么如此如此工作.

我的意思是:常识告诉我 loadRequest 方法应为:

 函数loadRequest(){警报(f.contentWindow.name);frame.parentNode.removeChild(frame);} 

但是它不起作用.

我想念什么?(任何其他尝试都会显示:跨域错误)

解决方案

您需要先将iframe窗口发送回父窗口可访问的域，然后再检查 window.name ，否则您会收到跨域错误.因此，在加载后，远程页面设置了 window.name ，您将其发送到 about:blank (不受相同来源政策的约束)，然后从父窗口中读取 window.name .

这里的第一个技巧是，无论您将窗口发送到何处， window.name 都会停留在周围.因此，您将窗口发送到远程域，让它设置 window.name ，将其发送回可访问域，然后读取它.

第二技巧是 about:blank 是 A 和 B 的理想环境.等等-没有跨域错误.

I'm struggling with myself to figure out why my code works in a specific way ( rather than the other way) :

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

Goal :

jsfiddle should connect to jsbin and jsbin should return data to jsfiddle using window.name ( cross domain technique).

(Again --the code is working)

jsbin's response is a Html page with :

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

And here is the code for 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*/   });

As you can see - the code works : http://jsfiddle.net/7Nawt/2/

So where is the question ?

Looking at line #17 , I do attach an onload handler for the iframe. (loadRequest).

But the loadRequest method - in turn --attaches again(!! --line #5) an onload function.

I dont understand why it is working like this .

I mean : the common sense tells me that the loadRequest method should be :

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

But it is not working.

What am I missing ? ( any other attempts display : a cross domain error)

解决方案

You need to send the iframe window back to a domain that is accessible to the parent window before you check window.name, otherwise you'll get the cross-domain error. So, after it loads and the remote page sets window.name, you send it to about:blank, which isn't subject to the same-origin policy, and then read window.name from the parent window.

The first trick here is that window.name sticks around no matter where you send the window. So, you send the window to a remote domain, let it set window.name, send it back to an accessible domain, and then read it.

The second trick is that about:blank is a happy environment for Both A and B. and so - no cross domain errors.

这篇关于使用window.name进行跨域-应该使用double onload吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！