ページにsrc属性の代わりにiframeのコンテンツを指定する

88

私は現在、写真をアップロードするためのいくつかのファイル入力を含むフォームに取り組んでいます。onchange()これらの入力には、画像をに送信しiframe、アップロードされた画像をフォームに動的にロードするイベントがあり、フィールドを変更する必要があります（名前や地理的ローカリゼーションなど）。

フォームをネストできないため、file_inputもに含まれていiframeます。結局、私iframeは別の内部を使用しますiframe。だから私はこのようなものを持っています：

<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>

そして、HTMLはにロードされたiframeようなものです（除くhtml、headおよびbodyタグ）

<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>

これは、最初のをロードするのに数秒かかるという事実を除いて、iframeうまく機能します。そのため、ファイル入力はページの残りの部分と一緒にロードされません。これは視覚的に理想的ではありません。iframe別のページ（file_input_url最初ので指定）をロードせずにコンテンツを指定できれば、それを解決できますiframe。

iframe同じドキュメントのコンテンツを指定する方法はありますか、それともsrc属性でのみ指定でき、別のページをロードする必要がありますか？

html iframe

— orlox
ソース

そのiframeをロードするのに「数秒」かかることはありません。10分の1ミリ秒に「噛むまでの時間」（これもミリ秒である必要があります）を加えたようなものになると思います。すべてのラグの原因を調査する必要があります-おそらくサーバーに何か問題があります。

— Abhi Beckert

95

.write()コンテンツをiframeドキュメントに入れることができます。例：

<iframe id="FileFrame" src="about:blank"></iframe>

<script type="text/javascript">
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
   doc.close();
</script>

— グッファ
ソース

1

しかし、この可能性について考えていたのですが、iframeにロードする必要のあるhtmlは複雑であり、iframeに書き込むために完全にjavascriptで処理すると、実装がわかりにくくなります（私が好むポイントまで）そのままにしておきます）。

— orlox 2010年

2

@orlox：Ajaxを使用してサーバーからコンテンツを取得し、挿入します。そのようにしたくない場合divは、コンテンツで非表示の要素を作成し、そのコンテンツをとのiframe間に配置<body>し</body>ます。

— スタックラー2013

11

iframeの制限について学ぶほど、嫌いになります

— John Magnolia 2014年

1

この方法を使用して一重引用符をエスケープするにはどうすればよいですか？それらのいくつかはHTMLに重要であり（例えばclass = 'example'）、いくつかはCSSに重要であり（例えばfont-family： 'Verdana';）、そしていくつかはコンテンツです（例えばGeorge O'Malley）。

— ダンBechard

2

@Dan：アポストロフィで区切られたJavaScript文字列で使用される値をエスケープするには、最初にバックスラッシュをエスケープし、次にアポストロフィをエスケープします。たとえば、C＃を使用してコードに文字列を出力しますdoc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');。

— グッファ2016

36

iframeは、インラインフレームに表示するページのHTMLコンテンツを指定するために使用できるsrcdocをサポートするようになりました。

— アユッシュグプタ
ソース

2

IEはこの権利をサポートしていませんが、caniuseで最新のステータスを確認できます。

— Ayush Gupta 2015

MDNに関するドキュメント

— Benoit Blanchon

22

：でdata:URLを使用できますsrc

var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);

<iframe></iframe>

スニペットを展開

iframe内のsrcdoc =“…”とsrc =“ data：text / html、…”の違い。

JavaScriptを使用してHTMLをdata：text / htmlリンクに変換します。

— ユーザー
ソース

1

あなたも、任意のJavaScriptを必要としない：src使用して例えばエスケープ場合、属性は、インラインを指定することができますrawurlencodePHPで：<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>

— ジェイク

マイクロソフトは、彼らがためのサポートを追加したとほとんど同時に、このためのサポートを追加しsrcdocて、srcdocこれを行うには良い方法です。データURLは、画像とCSSでのみ広くサポートされています-私が知る限り、InternetExplorerのどのバージョンもiframeでそれらをサポートしていません。

— Abhi Beckert

6

Guffaが説明した内容と組み合わせて、<script type = "text / template"> ... </ script>の説明で説明されている手法を使用して、HTMLドキュメントを特別なscript要素に格納できます（の説明については、リンクを参照してください）。これがどのように機能するか）。これは、HTMLドキュメントを文字列に保存するよりもはるかに簡単です。

— ximo
ソース

考え直してみると、これは完全なHTMLドキュメントではうまく機能しません。タグのような<html>、<body>、<script>文書のみのレンダリングを壊し、ブラウザを混乱させる。

— ximo 2011

これは問題ではないようです。スクリプト内のHTMLタグは無視されます。

— HBP 2013

あなたは正しいです:)私がそれを書いたとき、私はまだ実際にテクニックを試していませんでした、そしてどこかからその仮定を拾ったに違いありません。後で、<script>タグ内のすべてがブラウザによって無視されることがわかりました。訂正してくれてありがとう！

— ximo 2013