web-dev-qa-db-ja.com

HTMLコンテンツをiframeに設定する方法

HTML文字列があります

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

javaScriptを使用してiframeに設定します。私はこのようにHTMLを設定しようとしています：

contentWindow.document.body.innerHTML

または

contentDocument.body.innerHTML

または

document.body.innerHTML

しかしIEは「アクセスが拒否されました。」または「オブジェクトはこのプロパティまたはメソッドをサポートしていません。」または「アクションの最終要素が無効です。」エラーを返します。

完全なコードは次のとおりです。

<!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

次を使用できます。

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

jsFiddle は、すべての主要なブラウザーで機能します。

contentDocument.writeの代わりにcontentWindow.document.writeを使用する必要があることに注意してください。これにより、IE7でも機能します。

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

Html5では、 srcdoc属性 を使用できます。

19
Christophe

innerHTMLはIEでは特に注意が必要です。IEでは、theadのような要素は読み取り専用であり、多くの問題を引き起こします。

Msdnのドキュメントに基づいて、documentModeプロパティを提供するinnerHTMLを試すことができます。

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

これはIEでのみ機能する可能性があります。

6
MatthiasLaug

document.documentElement.innerHTML。ただし、ページ内のすべてが、それを行うスクリプトであっても置き換えられることを知っておいてください。

Iframeの場合、このようになりますmyIFrame.contentWindow.document.documentElement.innerHTML

0
user568109