Comment empêcher un iframe de se recharger lors du déplacement dans le DOM
J'ai un iframe chargé avec du contenu. Je voudrais le déplacer à l'intérieur du DOM sans provoquer d'actualisation (j'aime le contenu à l'intérieur, je veux le garder).
Je fais un peu de base node.appendChild(iframe) pour faire le travail.
Est-ce possible?
Merci d'avance pour votre aide.
4 réponses
Si vous essayez de le déplacer visuellement, vous pouvez essayer de modifier le CSS pour utiliser le positionnement absolu ou d'autres ajustements.
Cependant, si vous essayez de le sortir du DOM et de l'insérer ailleurs, vous ne pourrez pas éviter un rechargement.
Je ne le pense pas, car le navigateur va re-rendre / recharger l'iframe quand il est remis dans le DOM.
Http://polisick.com/moveNode.php mieux l'explique.
Pour déplacer un nœud, vous appelez removeNode pour le sortir de l'arbre et le mettre en mémoire, puis appendNode pour le "coller" là où vous le souhaitez.
J'ai eu un problème similaire avec un iFrame dans une boîte de dialogue jQueryUI. jQuery déplace le div (contenant mon iFrame) hors du DOM et parce que je voulais toujours des postbacks (duh), j'ai dû le déplacer en arrière. Après avoir lu ceci et plusieurs autres messages, j'ai trouvé une solution.
L'idée simple que j'ai remarquée est que l'iFrame se recharge quand il est déplacé. Donc, j'ai ajouté l'iFrame dans le conteneur de dialogue (div) après avoir déplacé la div dans le DOM. Cela fonctionne parce que jQuery ne se soucie pas ce qui est dans le conteneur. Voici un exemple de code:
Dialogue Ouvrir / fermer les fonctions:
Ouvrir:
function () {
$(this).parent().appendTo("form").css("z-index", "9000"); //Move the div first
$(this).append('<iframe id="iFrame" allowtransparency="true" frameborder="0" width="100%" height="100%" src="somePage.aspx"></iframe>');}, //then add the iframe
}
Fermer:
function() {
$(this).empty(); //clear the iframe out because it is added on open,
//if you don't clear it out, you will get multiple posts
$(this).parent().appendTo("divHidden"); //move the dialog div back (good house-keeping)
}
Html:
<div id="divHidden" style="display: none">
<div id="dialog" style="display: none">
</div>
</div>
Vous devez enregistrer le nœud 'Html' sous l'iframe et après avoir déplacé l'iframe, ajoutez-le