web-dev-qa-db-fra.com

Accéder aux éléments de la fenêtre parente d'iframe

J'ai une page que nous pouvons appeler parent.php. Dans cette page, j'ai un iframe avec un formulaire de soumission et en dehors de cela, j'ai un div avec l'id "cible". Est-il possible de soumettre le formulaire dans l'iframe et, le cas échéant, d'actualiser la div cible. Dites charger une nouvelle page ou quelque chose?

Edit: Le div cible est dans la page parent, ma question est donc de savoir si vous pouvez créer un exemple d’appel jQuery en dehors de l’iframe au parent. Et à quoi ça ressemblerait?

Edit 2: Voici donc à quoi ressemble mon code jQuery. C'est dans le de la page iframe. le div #target est dans le parent.php

$(;"form[name=my_form]").submit(function(e){     
 e.preventDefault; 
 window.parent.document.getElementById('#target'); 
 $("#target").load("mypage.php", function() { 
 $('form[name=my_form]').submit(); 
 }); 
 })

Je ne sais pas si le script est actif, le formulaire est envoyé avec succès, mais rien ne se passe pour cibler.

Edit 3:

J'essaie maintenant d'appeler la page parent à partir d'un lien situé dans l'iframe. Et pas de succès là non plus:

<a href="javascript:window.parent.getElementById('#target').load('mypage.php');">Link</a>
javascriptjqueryajaxiframe
65
Paparappa

Je pense que le problème peut être que vous ne trouvez pas votre élément à cause du "#" dans votre appel pour l'obtenir:

window.parent.document.getElementById('#target');

Vous n'avez besoin du # que si vous utilisez jQuery. Ici ça devrait être:

window.parent.document.getElementById('target');
111
barclay

Vous pouvez accéder aux éléments de la fenêtre parente depuis une iframe en utilisant window.parent comme ceci:

// using jquery    
window.parent.$("#element_id");

Quel est le même que:

// pure javascript
window.parent.document.getElementById("element_id");

Et si vous avez plusieurs iframes imbriqués et que vous souhaitez accéder à la plus haute iframe, vous pouvez utiliser window.top comme ceci:

// using jquery
window.top.$("#element_id");

Quel est le même que:

// pure javascript
window.top.document.getElementById("element_id");
11
Amr

Avoir le js ci-dessous à l'intérieur de l'iframe et utiliser ajax pour soumettre le formulaire.

$(function(){

   $("form").submit(e){
        e.preventDefault();

       //Use ajax to submit the form
       $.ajax({
          url: this.action,
          data: $(this).serialize(),
          success: function(){
             window.parent.$("#target").load("urlOfThePageToLoad");
          });
       });

   });

});
10
ShankarSangoli

Je pense que vous pouvez simplement utiliser window.parent à partir de l'iframe. window.parent renvoie l'objet window de la page parente, vous pouvez donc faire quelque chose comme:

window.parent.document.getElementById('yourdiv');

Ensuite, faites ce que vous voulez avec cette div.

5
varfoo