URLではなくIFRAMEソースとしてのHTMLコード

122

IFRAMEのこの標準コード、src URLをJust htmlコードに置き換える方法はありますか？私の問題は簡単です。MYSQLからHTMLボディをロードするページがあり、そのコードをフレームに表示して、ページの残りの部分から独立し、特定の境界の範囲内でコードをレンダリングします。

<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe>

html iframe frame

— マックス
ソース

回答:

148

データURLを使用してこれを行うことができます。これには、HTMLの単一の文字列にドキュメント全体が含まれます。たとえば、次のHTML：

<html><body>foo</body></html>

次のようにエンコードできます：

data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E

次にsrc、iframe の属性として設定します。例。

編集：他の代替手段は、JavaScriptでこれを行うことです。これはほぼ確実に私が選択するテクニックです。ブラウザが受け入れるデータURLの長さは保証できません。Javascriptテクニックは次のようになります。

var iframe = document.getElementById('foo'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = 'Hello world';

例

編集2（2017年12月）：Saurabh Chandra Patelの回答と同じように、Html5のsrcdoc属性を使用してください。IE / Edgeを効率的に検出できる場合、ヒントは、それらに対してのみsrcdoc-polyfillライブラリを使用し、IE / Edge以外のすべてのブラウザで「純粋な」srcdoc属性を使用することです（caniuse.comで確認してください）。

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

— 寂しい
ソース

Internet Explorerのサポート？データURIはIE8のhtmlファイルを表すことができません

— フランツロレンゾン

ここにクロスオリジンヘッダーを提供する方法はありますか？Chromeはについて不平を言い続けBlocked a frame with origin "http://localhost" from accessing a cross-origin frameます。

— jozxyqk 2014年

@AndrewSwan一重引用符の問題がよくわかりません。例を挙げてもらえますか？

— Septagram、2015年

PHPでこのようにHTMLをエンコードする方法を探していた私のような人にとっては、rawurlencode（php.net/manual/en/function.rawurlencode.php）

— Braiba

innerHTMLブラウザを使用する場合、子孫スクリプトタグは実行されないことに注意してください。詳細については、Element.innerHTML MDNページの「セキュリティに関する考慮事項」セクションを確認してください。

— レオニードヴァシレフ2017

使用html5の新しい属性srcdoc（srcdoc-ポリフィル）ドキュメント

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

ブラウザーサポート-次のブラウザーでテスト済み：

Microsoft Internet Explorer
6, 7, 8, 9, 10, 11
Microsoft Edge
13, 14
Safari
4, 5.0, 5.1 ,6, 6.2, 7.1, 8, 9.1, 10
Google Chrome
14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24.0.1312.5 (beta), 25.0.1364.5 (dev), 55
Opera
11.1, 11.5, 11.6, 12.10, 12.11 (beta) , 42
Mozilla FireFox
3.0, 3.6, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 (beta), 50

— サウラブチャンドラパテル
ソース

よろしくお願いします！私は最新のWebkit WebViewのソリューションを必要としていましたが、それはこれを行う最も簡単な方法でした！

— Antoine Bolvy

これは、IEでサポートされていない

— 男

CanIUse.comによると、サポートはかなり貧弱です：caniuse.com/#search=srcdoc

— msquitieri

@msquitieriいいえ、ポリフィルではなくネイティブサポートが貧弱だと言っています。

— Walf、2016

しかし、引用符を使い始めるとすぐに壊れます

— Agil

W3Schoolsによると、HTML 5では新しい「srcdoc」属性を使用してこれを行うことができますが、ブラウザーのサポートは非常に制限されているようです。

— アンドリュースワン
ソース

srcdocのポリフィルもあります。

— Uwe Keim 2014

@UweKeimポリフィルを提案してくれてありがとう。それは軽量で素晴らしい働きをします。

— マフィンマン

caniuse.comによると、悪名高いMicrosoftのIEおよびEdgeブラウザー（Opera Miniを除く）はsrcdoc属性をサポートしていないため、「非常に限定的」ではありません。Microsoftユーザーにはsrcdoc-polyfillを使用してください。

— Heitor 2017