web-dev-qa-db-ja.com

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

IFRAMEのこの標準コード、src URLを単なる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>
htmliframeframe
104
Max

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

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

これとしてエンコードできます：

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

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

編集：もう1つの方法は、Javascriptでこれを行うことです。これはほぼ間違いなく私が選択するテクニックです。ブラウザが受け入れるデータURLの長さは保証できません。 Javascriptテクニックは次のようになります。

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

iframedoc.body.innerHTML = 'Hello world';

例

Edit 2（2017年12月）：Html5のsrcdoc属性を使用しますSaurabh Chandra Patelの答えのように、誰が今受け入れられた答えであるか！ IE/Edgeを効率的に検出する が可能な場合、ヒントは srcdoc-polyfill ライブラリのみを使用し、IE/Edge以外のすべてのブラウザで「純粋な」srcdoc属性を使用することです（ caniuse.com を確認してください）。

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

html5 srcdoc-polyfillを使用 Docs

<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
69
Saurabh Chandra Patel

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

19
Andrew Swan