2009-02-12 2 views
38

Il cliente che sto lavorando con ha un frame in questo modo ...Run JQuery nel contesto di un altro telaio

<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> 

Quando una certa azione si svolge Ho bisogno del mio telaio (importantframe che attualmente è nascosto) per per lo più occupano la pagina e bloccano qualsiasi interazione con gli altri frame. Sto pianificando di bloccare l'interazione usando il plugin UI del blocco jQuery.

Il problema è che non riesco a modificare i file foo.html o blah.html. Quindi il codice JS non può vivere lì. Quello che devo fare è eseguire il mio codice jquery nel contesto di quei frame. Quindi, per ricapitolare, ho bisogno del mio codice JQuery per vivere in myFrame.html ma eseguito nel contesto degli altri frame. Come lo posso fare? Spero che abbia un senso.

Grazie CDR

risposta

0

Io non sono certo sul plugin blocco, ma non posso entrare in possesso del relativo telaio e manipolare usando l ' "albero frame", qualcosa di simile: (dall'interno importantFrame htm)

parent.theFrame.someProperty = someValue; 

esempio:

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

Da quello che ho letto, potrebbe essere necessario Jquery sulla pagina di destinazione, ma si potrebbe provare Somet hing come:

parent.theFrame.block(); 

o forse:

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

La funzione jQuery, che voi chiamate più comunemente con $, prende un secondo argomento chiamato contesto, che è "quale elemento DOM di oggetto jQuery dovrei fai la ricerca in ". La maggior parte delle volte omettete questo argomento, quindi il contesto predefinito è il documento HTML corrente. Quando il codice è in esecuzione nell'iframe, per impostazione predefinita il documento è il documento di iframe. Ma puoi facilmente prendere il documento per uno degli altri fotogrammi.

Ad esempio, inserire questo in myFrame.html e questo rimuoverà tutti gli elementi h1 dal frame con blah.html in esso. Notare secondo argomento $, che è l'espressione che afferra il telaio bla dall'interno importante quadro:

<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

Buona risposta - Stavo per fare una domanda simile! – CMPalmer

+2

Puoi anche scrivere la parte 'window.parent.frames [0] .document' come' window.parent.theFrame.document', che è più * verbose *. – joar

4

Come pjb3 detto, impostare il contesto jQuery. Se si dispone di cornici nidificate, il codice sarà simile a questa:

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

O, meglio ancora, creare un collegamento:

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

Nelle versioni di jQuery> = 1.7, non siamo in grado di ottenere gli eventi vecchio modo

Le versioni precedenti (1.7): <

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

1.7 e più recenti:

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