web-dev-qa-db-ja.com

iframeのinnerHTMLを設定する

JavaScriptでは、iframeのinnerHTMLをどのように設定できますか？つまり、設定方法は get ではありません。

window["ifrm_name"].document.innerHTML= "<h1>Hi</h1>"は機能しません。他のソリューションでも同じです。

Iframeと親ドキュメントが同じドメインにあります。

本文ではなく、ドキュメント全体のiframeのhtmlを設定する必要があります。

私はjqueryソリューションを避ける必要があります。

javascriptiframeinnerhtml
22
tic

本当に簡単な例...

<iframe id="fred" width="200" height="200"></iframe>

次に、インライン、イベントの一部などの次のJavascriptが実行されます...

var s = document.getElementById('fred');
s.contentDocument.write("fred rules");

「contentDocument」はメインウィンドウに表示される「ドキュメント」に相当するため、これに対して呼び出しを行って、本文、ヘッド、内部の要素などを設定できます。

私はこれをIE8、ChromeおよびFirefox ...でのみテストしました。そのため、利用可能なコピーがある場合は、IE6/7でテストすることをお勧めします。

28
Jeff Parker

FirefoxおよびChrome（Operaについては不明））では、 data：URI スキームを使用できます。

 <iframe src=".... data: URI data here ......">

JSFiddleの例

ここ はdata：URIエンコードされたデータを生成するツールです。

これは IEでは機能しません ：

セキュリティ上の理由から、データURIはダウンロードされたリソースに制限されています。データURIは、ナビゲーション、スクリプト、またはフレームまたはiframe要素の入力に使用できません。

ただし、コメントで言ったように、ドキュメントの本文を取得/設定するだけで十分な場合は、リンクされた例のいずれかを使用する方がはるかに簡単です。

7
Pekka

srcdoc属性もあります：

<iframe srcdoc="<p><h1>Hello</h1> world</p>"></iframe>

デモ 、 ポリフィル 。

1
nha

AJAXS envでのファイルアップロードの改善には、同じニーズがありました。これはie8とff 22.0で私のために働きました。 body innerhtmlとdiv innerhtmlの両方が機能します。

function copyframedata(data) {
  var x = document.getElementById("photo_mgr_frame");
  var y = x.contentWindow || x.contentDocument;
  if (y.document) y = y.document;
  y.getElementById('photo_mgr_mb').innerHTML = data;
}

w3からそれを得た

1
johnny3