Javascript Girl
  1. Javascript Girl
  3. Écrivez des éléments dans un iframe enfant en utilisant Javascript ou jQuery
Intereting Posts
Guide de style de codage pour les applications node.js? Liste déroulante en cascade Comment implémenter l'insertion automatique de point-virgules JavaScript dans JavaCC? Obtention d'un attribut data- * pour l'événement onclick pour un élément html Socket.io ne pas envoyer au client JQuery looping .each () La clé / valeur JSON ne fonctionne pas Tâches du service à long terme accessibles AJAX bloquant les demandes de service AJAX subséquentes dans un environnement compatible Compatibilité / Sessions ASP.NET JQuery DataTables ajoute des icônes de pays chaque colonne L'heure du premier octet avec javascript? Obtenir le contenu d'un élément SANS ses enfants Comment avoir un script dans le script <head> ajouter à la fin du <corps> Changer de chaîne à une fonction en javascript (pas eval) Comment effacer les cookies dans angular.js Comment puis-je sélectionner un élément par sa valeur de texte dans une liste déroulante en utilisant jQuery? Ecrire des données à USB HID en utilisant Javascript, HTML5 ou toute langue multiplate-forme (prend en charge Android)

Écrivez des éléments dans un iframe enfant en utilisant Javascript ou jQuery

J'ai quelque chose comme ça: 

<html> <body> <iframe id="someFrame"></iframe> </body> </html>

Et j'aimerais utiliser jQuery pour écrire des éléments tels que le HTML complet équivalent serait comme ceci: 

 <html> <body> <iframe id="someFrame"> <!-- inside the iframe's content --> <!-- <html><body> --> <div>A</div> <div>B</div> <div>C</div> <!-- </body></html> --> </iframe> </body> </html>

Alternativement, n'importe quel Javascript simple serait bien.

Merci.

Edit : Après un peu plus de recherche, il me semble que je cherche un équivalent IE de la propriété contentDocument d'un iframe. "ContentDocument" est une norme W3C que FF prend en charge, mais IE ne le fait pas. (surprise Surprise)

Vous pouvez faire les deux, vous devez simplement cibler différemment: 

 var ifrm = document.getElementById('myIframe'); ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument; ifrm.document.open(); ifrm.document.write('Hello World!'); ifrm.document.close();

Après quelques recherches, et une réponse corroborante de Mike, j'ai trouvé que c'est une solution: 

  var d = $("#someFrame")[0].contentWindow.document; // contentWindow works in IE7 and FF d.open(); d.close(); // must open and close document object to start using it! // now start doing normal jQuery: $("body", d).append("<div>A</div><div>B</div><div>C</div>");

Je viens sur un membre ici et suggère que les réponses proposées jusqu'à présent ne sont pas possibles.

Si cet iframe a effectivement un src = "somepage.html" (que vous devriez avoir indiqué, et sinon, quel est le but de l'utilisation de l'iframe?), Je ne pense pas que Jquery puisse manipuler directement html à travers les images dans tous les navigateurs . Compte tenu de mon expérience avec ce genre de choses, la page contenant ne peut pas appeler directement des fonctions ou créer une sorte de contact Javascript avec la page iframe.

Votre "somepage.html" (la page qui charge dans l'iframe) doit faire deux choses:

  1. Passez une sorte d'objet à la page contenant qui peut être utilisée comme un pont
  2. Avoir une fonction pour définir le HTML comme vous le souhaitez

Ainsi, par exemple, somepage.html pourrait ressembler à ceci: 

 <html> <head> <script src="jquery.js"> </script> <script language=JavaScript> <!--// var bridge={ setHtml:function(htm) { document.body.innerHTML=htm; } } $(function() { parent.setBridge(bridge); }); //--></script> </head> <body></body> </html>

Et la page contenant peut-être ressembler à ceci: 

 <html> <head> <script src="jquery.js"> </script> <script language=JavaScript> <!--// var bridge; var setBridge=function(br) { bridge=br; bridge.setHtml("<div>A</div><div>B</div><div>C</div>"); } //--> </script> </head> <body><iframe src="somepage.html"></iframe></body> </html>

Cela peut sembler un peu compliqué, mais il peut être adapté dans un certain nombre de directions et devrait fonctionner au moins dans IE, FF, Chrome et probablement Safari et Opera …

Il existe deux méthodes fiables pour accéder à l'élément du document intérieur d'un iframe :

1. La propriété window.frames : 

 var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;

Démonstration

2. La propriété contentDocument : 

 var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;

Démonstration

J'ai trouvé que cela était compatible avec les navigateurs … un petit croisement de réponses précédentes et un peu d'essai et d'erreur. 🙂

Je l'utilise pour télécharger un rapport ou, si une erreur (message) se produit, elle s'affiche dans iFrame. La plupart des utilisateurs auront probablement l'iFrame caché, je l'utilise multi-fonctionnel.

Je dois effacer le contenu de l'iFrame chaque fois que je clique sur le bouton de téléchargement du rapport – l'utilisateur peut modifier les paramètres et il se produit qu'il n'y a pas de résultats qui s'affichent dans l'iFrame en tant que message. S'il y a des résultats, l'iFrame reste vide – parce que le code ci-dessous l'a effacé et que la window.open(...) génère une disposition Content-Disposition: attachment;filename=... 

 var $frm = $("#reportIFrame"); var $doc = $frm[0].contentWindow ? $frm[0].contentWindow.document : $frm[0].contentDocument; var $body = $($doc.body); $body.html(''); // clear iFrame contents <- I'm using this... $body.append('<i>Writing into the iFrame...</i>'); // use this to write something into the iFrame window.open(Module.PATH + 'php/getReport.php' + Report.queryData, 'reportIFrame');

Je n'ai pas de navigateur compatible avec contentDocument mais je l'ai codé de cette façon, je l'ai laissé. Peut-être quelqu'un a-t-il des navigateurs plus anciens et peut-il publier des problèmes de compatibilité / problèmes?