Comment obtenir l'élément parent (pas seulement la fenêtre) d'un iframe?

Question

Semblable à this question, mais ma configuration est un peu différente.

J'ai écrit cette fonction:

function ShowDialog(url, width, height, id, options) { 
    var self = arguments.callee; 
    if(!self.dialogs) self.dialogs = {}; 

    var src = url + (url.indexOf('?') === -1 ? '?' : '&') + '_popup=1'; 
    if(id) src += '&_field=' + encodeURIComponent(id); 

    if(url in self.dialogs === false) { 
     var defaults = { 
      width: width, 
      height: height, 
      modal: true, 
      resizable: false, 
      draggable: false, 
      closeText: 'Close' 
     }; 

     self.dialogs[url] = $('<div/>') 
      .html('<iframe width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" src="'+src+'">Your browser does not support iframes.</iframe>') 
      .dialog(options ? $.extend(defaults, options) : defaults); 
    } else { 
     if(self.dialogs[url].data('reload')) { 
      self.dialogs[url].data('reload', false).children('iframe').attr('src', src); 
     } 
     self.dialogs[url].dialog('open'); 
    } 
    return false; 
} 

que j'utilise comme ceci:

<button onclick="return ShowDialog('/companies/add', 400, 320, 'id_company');">New</button> 

Lorsque vous cliquez sur le bouton, il ouvre une boîte de dialogue avec un iframe contenant un formulaire. Lorsque vous soumettez le formulaire, il redirige vers une autre page qui contient uniquement un script censé fermer le dialogue.

Dans l'autre question, il a l'ID de l'iframe afin qu'il puisse le trouver, puis appelez .dialog('close'). J'ai généré mon iframe à la volée, donc je ne sais pas comment y accéder.

Cependant, je sais que mon iframe se trouve toujours à l'intérieur d'un div qui a l'objet .dialog ... il devrait y avoir un moyen d'obtenir l'élément parent d'un iframe à l'intérieur de ce iframe, non?

Quelqu'un sait-il comment?

---

Peut-on trouver peut-être faire quelque chose comme

window.parent.jQuery(this).parent() 

? Je ne sais pas ce que this doit être cependant. Une sorte de référence à elle-même ... window ne fonctionnait pas.

Answer 1

window.frameElement vous donne l'élément IFrame

var parent = $(window.frameElement).parent(); 

Answer 2

dans votre iframe vous pouvez obtenir le comme DOM mère ceci:

window.parent.frames[0].parentNode; 

cela suppose la fenêtre parent a seulement 1 iframe, que iframe étant celui que vous faites cet appel de

Eh bien est peut-être ici (non testé) une autre façon de faire, de créer une fonction dans la fenêtre parent comme:

var findParent = function() { 
    return $(this).parent(); 
} 

puis à l'intérieur de l'iframe faire:

window.parent.findParent.call(window); 

Encore une fois non testé :-)

OK 3e tentative.

dans votre fonction ShowDialog au lieu de return false faire:

return self;

puis dans le cache de votre iframe le retour dans une variable de sorte que votre bouton ressemblerait à ceci:

<button onclick="obj = ShowDialog('/companies/add', 400, 320, 'id_company'); return false;">New</button>

si quelque part dans votre iframe avant ce bouton vous auriez un var obj;;

alors chaque fois que vous avez besoin du parent de l'iframe que vous pourriez faire:

obj.dialogs[window.location.pathname];

cette OMI devrait renvoyer le parent de l'iframe.

encore non testé: D

Answer 3

Je pense que cela est à peu près aussi bon que nous pouvons faire:

<script type="text/javascript"> 
var $ = window.parent.jQuery; 
$('.ui-dialog-content').filter(function(){return $(this).dialog('isOpen');}).dialog('close').data('reload', true); 
</script> 

Il doit permettre iframes multiples et les boîtes de dialogue jQuery UI sur la page tant que 2 ne sont pas ouvert en même temps (ce qui ne devrait jamais être le cas).

---

Révisée, avec la suggestion de valipour.

<script type="text/javascript"> 
var $ = window.parent.jQuery; 
{% if popup_field %} 
$('#{{popup_field|escapejs}}').val('{{value|escapejs}}').addClass('selected').focus(); 
{% endif %} 
$(window.frameElement).closest('.ui-dialog-content').dialog('close').data('reload', true); 
</script> 

(Ceci est un modèle Django)

Answer 4

Juste une extension sur la selected answer par valipour, qui, autant que je sache, fonctionne très bien . Cependant, avant que je n'arrive à cette méthode, j'ai dû "inventer" une manière qui serait cross-browser en utilisant jQuery.

La solution que j'ai souvent trouvée était parent.document. Le problème ici est, "et si j'ai plusieurs iFrames?"

Ainsi l'extrait suivant!

var parIframe = $(parent.document).find('iframe') 
     .filter(function(i){ return $(this).contents()[0] == $(document)[0] }); 

La méthode .filter permet de comparer le contenu de chaque iFrame dans la fenêtre parent au contenu du iFrame courant, revenant ainsi que la fenêtre iFrame que vous recherchez.