2009-02-12 12 views
38

El cliente Estoy trabajando con un conjunto de marcos tiene como tan ...Run JQuery en el contexto de otro marco

<frameset rows="100,*, 0"> 
    <frame name="theFrame" id="theFrame" src="blah.html" > 
    <frame name="theSecondFrame" id="theSecondFrame" src="foo.html" > 
    <frame name="importantFrame" id="importantFrame" src="myFrame.html" > 
</frameset> 

Cuando una determinada acción se lleva a cabo Necesito mi marco (importantframe que está oculto en ese momento) a sobre todo asumir la página y bloquear cualquier interacción con los otros marcos. Estoy planeando bloquear la interacción usando el plugin UI del bloque jquery.

El problema es que no puedo cambiar los archivos foo.html o blah.html. Entonces el código JS no puede vivir allí. Lo que necesito hacer es ejecutar mi código jquery en el contexto de esos marcos. Solo para recapitular, necesito que mi código JQuery viva en myFrame.html pero se ejecute en el contexto de los otros marcos. ¿Cómo puedo hacer eso? Espero que tenga sentido.

Gracias CDR

Respuesta

0

No estoy seguro sobre el plugin de bloque, pero no puedo controlar la trama relevante y manipularlo a través del "árbol del marco", algo como esto: (desde dentro importantFrame htm)

parent.theFrame.someProperty = someValue; 

por ejemplo:

parent.theFrame.location.href='anotherPage.html'; 

por lo que he estado leyendo, es posible que necesite Jquery en la página de destino, pero se podría intentar Somet Hing como:

parent.theFrame.block(); 

o tal vez:

$('#theFrame').block(); 
80

La función jQuery, que más comúnmente se llama con $, toma un segundo argumento denominado contexto, que es "qué elemento DOM del objeto jQuery debería haz la búsqueda en ". La mayoría de las veces omite este argumento, por lo que el contexto se predetermina al documento HTML actual. Cuando su código se está ejecutando en el iframe, el documento se convierte por defecto en el documento de ese iframe. Pero puede agarrar fácilmente el documento para uno de los otros marcos.

Por ejemplo, ponga esto en myFrame.html, y esto eliminará todos los elementos h1 del marco con blah.html en él. Note el segundo argumento de $, que es la expresión que agarra el marco bla desde dentro del marco importante:

<html> 
    <head> 
    <script type="text/javascript" src="/javascripts/jquery.js"></script> 
    <script type="text/javascript"> 
     function doIt() { 
     $('h1', window.parent.frames[0].document).remove() 
     } 
    </script> 
    </head> 
    <body> 
    <h1>My Frame</h1> 
    <a href="#" onclick="doIt()">Do It</a> 
    </body> 
</html> 
+0

Buena respuesta - ¡Estaba a punto de hacer una pregunta similar! – CMPalmer

+2

También puede escribir la parte 'window.parent.frames [0] .document' como' window.parent.theFrame.document', que es más * verbose *. – joar

4

Como pjb3 dijo, establecer el contexto de jQuery. Si usted tiene marcos anidados, el código se vería así:

$('*',window.parent.frames[0].frames[0].document).size(); 

O, mejor aún, crear un acceso directo:

targetFrame = window.parent.frames[0].frames[0].document; 
$('*',targetFrame).size(); 
0

En las versiones de jQuery> = 1.7 no podemos obtener los eventos vieja manera

Las versiones más antiguas (< 1.7):

var events = $('#form').data('events'); 

1.7 y nuevas:

var events = $.fn.data($('#form'), 'events'); 
Cuestiones relacionadas