2009-09-03 13 views
14

¿Hay un gancho fácil para detectar que una ventana abierta por un script ha terminado de cargarse? Básicamente, quiero el equivalente al gancho onLoad(), pero no puedo configurarlo directamente: supongamos que el documento secundario es un dado y no puedo poner ningún código propio en él.Esperando la carga de la ventana secundaria para completar

Por ejemplo, decir que tengo los dos archivos siguientes:

parent.html:

<html> 
    <head> 
    <title>Parent</title> 
    </head> 
    <script type="text/javascript"> 
    var w; 
    function loadChild() { 
     w = window.open(); 
     w.location.href="child.html"; 
     // block until child has finished loading... how? 
     w.doSomething(); 
    } 
    </script> 
</html> 
<body> 
    I am a parent window. <a href="javascript:loadChild()">Click me</a>. 
</body> 

child.html:

<html> 
    <head> 
    <title>Child</title> 
    </head> 
    <script type="text/javascript"> 
    function doSomething() { 
     alert("Hi there"); 
    } 
    </script> 
</html> 
<body> 
    I am a child window 
</body> 

Desde el establecimiento location.href es no bloqueante, w.doSomething() ISN' t definido aún y la llamada doSomething() explota. ¿Cómo puedo detectar que el niño ha terminado de cargar?

Respuesta

15

Esto funciona si la ubicación de la nueva ventana abierta es del mismo origen:

var w = window.open('child.html') 
w.addEventListener('load', w.doSomething, true); 
+0

¿Puedes aclarar el" mismo origen "? Parece que no funciona con' file: /// 'URLs en mi cuadro local, pero tal vez eso sea una cuestión de seguridad? –

+0

Sí, probablemente. En el navegador, mismo origen básicamente significa que el objetivo debe estar en el mismo _host_ y sa yo _protocol_. ¿Lo estás mezclando con 'http: //', quizás? –

+0

Olvidé agregar que 'addEventLister' no es soportado apropiadamente en IE, por lo que usar jQuery como gabtub sugiere (u otro marco JS que corrige incompatibilidades del navegador para el manejo de eventos) es probablemente una buena idea ... –

4

¿qué tal

Parent.html:

<html> 
<head> 
<title>Parent</title> 
</head> 
<script type="text/javascript"> 
    var w; 
    function loadChild() { 
    w = window.open(); 
    w.location.href="child.html"; 
    // like this (with jquery) 
    $(w).ready(function() 
    { 
     w.doSomething(); 
    }); 
    } 
</script> 
</html> 
<body> 
    I am a parent window. <a href="javascript:loadChild()">Click me</a>. 
</body> 
+2

esto requiere jQuery, aunque ... puede no ser preferible ... – peirix

+0

Parece que no hace nada. :(No he visto el operador '$' antes (paso la mayor parte del tiempo en Java); ¿qué se supone que debe hacer? El depurador JavaScript de Chrome me da 'excepción no detectada ReferenceError: $ no está definido'. –

+0

Oops, cross-comment. Sí, jQuery, eso explicaría por qué no lo he visto. Parece que debería haber alguna forma de hacerlo solo con el DOM fuera de la caja. –

Cuestiones relacionadas