web-dev-qa-db-fra.com

Comment accéder au contenu du cadre (pas iframe) à partir de jQuery

J'ai 2 cadres dans une page comme celle-ci ( home.html )

<frameset rows="50%, 50%">
        <frame id="treeContent" src="treeContent.html" />
        <frame id="treeStatus"  src="treeStatus.html" />
</frameset>

puis dans un cadre ( treeStatus.html ) j'ai quelque chose comme

<body style="margin: 0px">
<div id="statusText">Status bar for Tree</div>
</body>

Je souhaite à partir de la fenêtre supérieure manipuler le div situé dans le cadre enfant via jquery (par exemple, afficher et masquer).

J'ai vu plusieursquestionscommececi et ils suggèrent ce qui suit

$(document).ready(function(){

            $('#treeStatus').contents().find("#statusText").hide();
     });

Je ne sais pas si cela fonctionne avec des iframes mais dans mon cas où j'ai des cadres simples cela ne semble pas fonctionner. Le code est placé dans home.html

Voici quelques sorties de la console Firebug

>>> $('#treeStatus')
[frame#treeStatus]
>>> $('#treeStatus').contents()
[]
>>> $('#treeStatus').children()
[]

Alors, comment puis-je accéder aux éléments du cadre à partir du cadre supérieur? Est-ce que j'ai râté quelque chose?

Réponse

Après avoir combiné les deux réponses ici, la bonne façon est

$('#statusText',top.frames["treeStatus"].document).hide();

Pour que cela fonctionne, le cadre doit avoir l'attribut name en dehors de l'id, comme ceci:

<frameset rows="50%, 50%">
            <frame id="treeContent" src="treeContent.html" />
            <frame name="treeStatus" id="treeStatus"  src="treeStatus.html" />
    </frameset>
javascriptjqueryhtmlframe
26
kazanaki

Vous pouvez saisir le cadre et la div que vous souhaitez manipuler et le passer dans une variable.

var statusText = top.frames["treeStatus"].document.getElementById('statusText');

Ensuite, vous pouvez faire tout ce que vous voulez via jQuery.

$(statusText).whatever();

Bien que vous ne puissiez parfois pas contourner l'utilisation de cadres, gardez à l'esprit que le <frame> la balise est obsolète en HTML5. Si vous prévoyez de passer au HTML5, vous devrez utiliser des iFrames.

12
Charles Caldwell

Vous devez fournir une référence au cadre auquel vous devez accéder:

$("some selector", top.frames["treeStatus"]))
5
RoToRa

J'ai des cadres imbriqués. Dans mon cas, pour le faire fonctionner, j'ai utilisé la commande:

var statusText = 
top.document.getElementById("treeStatus").contentDocument.getElementById("statusText");

Ensuite, comme Charles l'a déjà répondu, vous pouvez faire tout ce que vous voulez via jQuery:

$(statusText).whatever();
5
user2100764

Pour une solution jquery pure (qui ne nécessite pas top.frames etc), les éléments suivants semblent fonctionner:

$('some selector for item from frame' ,$('frame selector')[0].contentDocument)

Cela a l'avantage de fonctionner pour les cadres imbriqués:

$('inner frame item selector', $('inner frame selector', $('outer frame selector')[0].contentDocument)[0].contentDocument)
2
bacar

https://jamesmccaffrey.wordpress.com/2009/07/30/cross-frame-access-with-jquery/

    $(document).ready(function(){
     $("#Button1").click(function(){
      $(parent.rightFrame.document).contents().find(‘#TextBox1’).val(‘Hello from left frame!’);
     });
    });

Mais j'ai utilisé:

    $.post("content_right.php",{id:id},function(data)
     $(parent.frames["content_right"].document.body).html(data) ;
    });
2
Ionut Catalin Badea