web-dev-qa-db-fra.com

Comment définir du contenu HTML dans un iframe

J'ai une chaîne HTML

<html>
  <body>Hello world</body>
</html>

et je veux le définir sur un iframe avec JavaScript. J'essaie de définir le HTML comme ceci:

contentWindow.document.body.innerHTML

ou

contentDocument.body.innerHTML

ou

document.body.innerHTML

mais IE donne des erreurs "Accès refusé." ou "L'objet ne prend pas en charge cette propriété ou méthode." ou "Élément final non valide de l'action.").

Voici mon code complet:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="jquery_1.7.0.min.js"/>
    <script type="text/javascript">
      $(document).ready(function(){
        var htmlString = "<html><body>Hello world</body></html>";
        var myIFrame = document.getElementById('iframe1');
        // open needed line commentary
        //myIFrame.contentWindow.document.body.innerHTML = htmlString;
        //myIFrame.contentDocument.body.innerHTML = htmlString;
        //myIFrame.document.body.innerHTML = htmlString;
        //myIFrame.contentWindow.document.documentElement.innerHTML = htmlString;
      });
    </script>
  </head>
  <body>
    <p>This is iframe:
      <br>
      <iframe id="iframe1">
      <p>Your browser does not support iframes.</p>
      </iframe>
  </body>
</html>
javascripthtmliframeinternet-explorer-8internet-explorer-9
30
mr.boyfox

Vous pouvez utiliser:

document.getElementById('iframe1').contentWindow.document.write("<html><body>Hello world</body></html>");

Voici un jsFiddle , qui fonctionne dans tous les principaux navigateurs.

Notez qu'au lieu de contentDocument.write Tu devrais utiliser contentWindow.document.write: cela fonctionne également dans IE7.

51
Mathijs Flietstra
var htmlString="<body>Hello world</body>";
var myIFrame = document.getElementById('iframe1');
myIFrame.src="javascript:'"+htmlString+"'";

Avec html5, vous pourrez utiliser attribut srcdoc .

19
Christophe

innerHTML est un peu délicat surtout dans IE, où des éléments comme thead sont en lecture seule et causent beaucoup de problèmes.

Sur la base de la documentation sur msdn, vous pouvez essayer documentMode qui fournit une propriété innerHTML.

myIFrame = myIFrame.contentWindow ||
    myIFrame.contentDocument.document ||
    myIFrame.contentDocument;
myIFrame.document.open();
myIFrame.document.write('Your HTML Code');
myIFrame.document.close();

cela pourrait ne fonctionner que dans IE.

6
MatthiasLaug

Que diriez-vous document.documentElement.innerHTML. Mais sachez que tout dans la page sera remplacé, même le script qui le fait.

Pour un iframe, ce serait comme ça myIFrame.contentWindow.document.documentElement.innerHTML

0
user568109