2011-07-13 9 views
11

En Javascript, supongamos que tenemos una página principal (main.html) que contiene un (iframe.html)ventana Javascript objeto

Ahora dentro de este iframe.html, si tenemos que hacer referencia a algo en la página principal (main.html) , podemos no sólo especificamos window en lugar de parent.window

Si la respuesta es que necesitamos escribir parent.window, quería entender ¿no hay una sola referencia window objeto para todos los marcos flotantes dentro de una página principal ..

Si bien entiendo document es específico de marcos flotantes individuales, pero window debería ser común a all..Isn't que ... Por favor me ayude a comprender el concepto ...

También hay algo como window.parent bien ? En caso afirmativo, ¿cómo difiere de parent.window?

Respuesta

8

El concepto de window está ligada a la document: Hay una window por document, y uno document por window.

Eso significa elementos, que tienen su propia document, también tienen su propia window, al igual que una ventana emergente o la ventana principal del navegador.

Así, podrás hecho tener que utilizar window.parent para acceder al contenedor de un elemento de , al igual que usted tiene que utilizar window.opener para acceder al dueño de una ventana emergente.

EDIT: Ambos window.parent y parent.window son expresiones válidas que devuelven el mismo objeto. Esto se debe a que el objeto window es contexto predeterminado en secuencias de comandos (los nombres no calificados se analizan como miembros de window) y los objetos window tienen una propiedad window que hace referencia a ellos mismos.

Por lo tanto, parent.window se evalúa como window.parent.window, que es el mismo objeto que window.parent.

Dicho esto, prefiero usar window.parent, para evitar la sobrecarga (mínima) asociada con el acceso a la propiedad adicional.

+0

¿Tengo que usar window.parent para acceder al contenedor O parent.window O ambos son válidos? – testndtv

+2

@hmthr Recomiendo 'window.window.parent.window.window' ...':) ' –

+0

@hmthr: en JavaScript en los navegadores, el objeto window es el contenedor de todas las variables globales. De hecho, el símbolo de 'ventana' es, en sí mismo, una propiedad del objeto ventana (refiriéndose al objeto). 'parent' también es una propiedad del objeto window, por lo que' window.parent' es redundante, solo puede decir 'parent'. Sin embargo, es útil para tener claro lo que estás haciendo. 'parent.window' también funcionará, pero de una manera engañosa: la parte' parent' le proporciona el objeto de la ventana principal de su ventana, no necesita ir más allá; y luego está buscando el props 'window' en él (que se refiere a él). –

10

iframe s (y frame s) son sus propias ventanas, a pesar de que en el caso de iframe s se ven como si fueran parte de la ventana del documento principal. Así que sí, para referirse a la ventana del documento principal, usarían parent (o window.parent si quieres que sea detallado, pero claro), porque son objetos separados. Esto es parcialmente necesario porque muchas de las cosas en document terminan como propiedades en el que contiene window.

Si lo piensas bien, tiene sentido: El propósito de un iframe es incrustar contenido de origen independiente dentro de la página. Si la página principal y el iframe (s) compartían un único objeto window, compartirían el contexto global y posiblemente entrarían en conflicto.

Gratuitous live example:

HTML de los padres:

<p>I'm the parent window</p> 
<iframe width="500" height="500" src="http://jsbin.com/iyogir"></iframe> 

JavaScript de Padres:

function foo() { 
    display("<code>foo</code> called!"); 
} 
function display(msg) { 
    var p = document.createElement('p'); 
    p.innerHTML = msg; 
    document.body.appendChild(p); 
} 

HTML del niño:

<p>I'm in the frame</p> 
<input type='button' id='theButton' value='Click Me'> 

JavaScr del niño IPT:

window.onload = function() { 

    document.getElementById('theButton').onclick = function() { 
    var p = window.parent; 
    if (!p) { 
     display("Can't find parent window"); 
    } 
    else if (typeof p.foo !== "function") { 
     display("Found parent window, but can't find <code>foo</code> function on it"); 
    } 
    else { 
     display("Calling parent window's <code>foo</code> function."); 
     p.foo(); 
    } 
    }; 

    function display(msg) { 
    var p = document.createElement('p'); 
    p.innerHTML = msg; 
    document.body.appendChild(p); 
    } 

}; 
Cuestiones relacionadas