web-dev-qa-db-fra.com

Écrire 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 je voudrais 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, tout Javascript ancien serait correct.

Merci.

Edit: Après un peu plus de recherche, il 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))

javascriptjqueryiframe
47
Jeff Meatball Yang

Vous pouvez faire les deux, il vous suffit de viser 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();
84
Mike Robinson

Après quelques recherches et une réponse corroborante de Mike, j'ai trouvé que c'était 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>");
36
Jeff Meatball Yang

Il existe deux méthodes fiables pour accéder à l'élément document à l'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émo


2. La propriété contentDocument :

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

Démo

9
Mori

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

Si cet iframe a réellement un src = "somepage.html" (que vous auriez dû indiquer, et sinon, quel est l'intérêt d'utiliser iframe?), Alors je ne pense pas que Jquery puisse manipuler directement le html à travers les cadres dans tous les navigateurs . Sur la base de mon expérience avec ce genre de choses, la page contenant ne peut pas appeler directement des fonctions à partir de ou établir une sorte de contact Javascript avec la page iframe.

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

  1. Passez une sorte d'objet à la page contenant qui peut être utilisé 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 pourrait 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 ...

7
jwl

J'ai trouvé que c'était compatible avec tous les navigateurs ... un petit croisement des réponses précédentes et un peu d'essais et d'erreurs de ma part. :)

J'utilise ceci pour le téléchargement d'un rapport ou, si une erreur (message) se produit, il s'affiche dans l'iFrame. La plupart des utilisateurs auront probablement l'iFrame caché, je l'utilise multifonctionnel.

Le fait est que 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 aucun résultat qui s'affiche ensuite dans l'iFrame sous forme de message. S'il y a sont résultats, l'iFrame reste vide - car le code ci-dessous l'a effacé et la méthode window.open(...) génère un Content-Disposition: attachment;filename=... document.

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 qui prend en charge contentDocument mais je l'ai codé de cette façon, donc je le laisse. Peut-être que quelqu'un a des navigateurs plus anciens et peut publier des confirmations/problèmes de compatibilité?

0
damijank