2009-02-12 11 views
38

Le client Je travaille avec a ... frameset comme siRun JQuery dans le cadre d'un autre cadre

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

Quand une certaine action se déroule je besoin de mon cadre (importantframe qui est actuellement caché) à la plupart prennent le contrôle de la page et bloquent toute interaction avec les autres images. Je prévois de bloquer l'interaction en utilisant le plugin d'interface utilisateur du bloc jquery.

Le problème est que je ne peux pas réellement changer les fichiers foo.html ou blah.html. Donc, le code JS ne peut pas vivre là. Ce que je dois faire est d'exécuter mon code jquery dans le contexte de ces cadres. Donc, juste pour récapituler, j'ai besoin de mon code JQuery pour vivre dans myFrame.html mais l'exécuter dans le contexte des autres cadres. Comment puis je faire ça? J'espère que cela a du sens.

Merci CDR

Répondre

0

Je ne suis pas certain du plugin bloc, mais ne peut pas vous mettre la main sur le cadre pertinent et le manipuler en utilisant le, quelque chose comme « arbre cadre » ceci: (à partir de importantFrame .htm)

parent.theFrame.someProperty = someValue; 

par exemple:

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

d'après ce que je lis, vous pourriez avoir besoin Jquery sur la page cible, mais vous pouvez essayer SOMET Hing comme:

parent.theFrame.block(); 

ou peut-être:

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

La fonction jQuery, que vous appelez le plus souvent avec $, prend un second argument appelé contexte, ce qui est « quel élément DOM de l'objet jQuery dois-je faire la recherche dans ". La plupart du temps, vous omettez cet argument, de sorte que le contexte par défaut est le document HTML actuel. Lorsque votre code s'exécute dans l'iframe, le document par défaut est le document de ce iframe. Mais vous pouvez facilement récupérer le document pour l'un des autres cadres. Par exemple, mettez ceci dans myFrame.html, et cela supprimera tous les éléments h1 du cadre avec blah.html. Notez que le second argument $, qui est l'expression qui saisit le cadre de bla de l'intérieur important cadre:

<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

Bonne réponse - j'étais sur le point de poser une question similaire! – CMPalmer

+2

Vous pouvez également écrire la partie 'window.parent.frames [0] .document' sous la forme' window.parent.theFrame.document', ce qui est plus * verbeux *. – joar

4

Comme pjb3 dit, définissez le contexte jQuery. Si vous avez des images imbriquées, votre code ressemblera à ceci:

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

Ou, mieux encore, faire un raccourci:

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

Dans les versions de jQuery> = 1.7 nous ne pouvons pas obtenir des événements ancienne

versions plus anciennes (< 1.7):

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

1.7 et plus récent:

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