[解決済み] HtmlコードをURLではなくIFRAMEソースとして表示する
2022-05-05 05:27:12
質問
このIFRAMEの標準的なコードは、ちょうどhtmlコードでsrcのURLを置き換える方法はありますか? だから私の問題は簡単です、私はそれがMYSQLからHTMLボディをロードするページを持っている私はそれがページの残りの部分から独立して、その特定の境界の境界内に自己レンダリングするようにフレーム内のコードを提示したいと思います。
<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe>
解決方法は?
データURLを使えば可能です。 これは、ドキュメント全体を1つのHTMLの文字列で含みます。 たとえば、次のようなHTMLです。
<html><body>foo</body></html>
はこのようにエンコードすることができます。
data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E
として設定し
src
属性を指定します。
例
.
編集部:もう一つの選択肢は、Javascriptでこれを行うことです。 私が選ぶのは、ほぼ間違いなくこの方法です。 ブラウザが受け入れるデータURLの長さを保証することはできません。 Javascriptのテクニックは次のようなものでしょう。
var iframe = document.getElementById('foo'),
iframedoc = iframe.contentDocument || iframe.contentWindow.document;
iframedoc.body.innerHTML = 'Hello world';
編集2(2017年12月) : Html5 の srcdoc 属性と同じように Saurabh Chandra Patel(サウラブ・チャンドラ・パテル の答えが、今、受け入れられる答えになるはずです! もし、あなたが IE/Edgeを効率的に検出する を使うのがコツです。 srcdoc-polyfill ライブラリと、IE/Edge 以外のブラウザの srcdoc 属性にのみ適用されます。 カニースドットコム をご覧ください。)
<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
関連
-
ローカルリソースのロードが許可されていない問題を解決する
-
[解決済み] BootstrapのCollapse Navbarが動作しない
-
[解決済み] 横型リストアイテム
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] Sublime Text 2を使ってHTMLコードを再フォーマットするにはどうしたらいいですか?
-
[解決済み] リンクを新しいタブまたはウィンドウで開く[重複]。
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] CSS背景のストレッチとスケール
-
[解決済み] 親ページからiframe内のJavaScriptコードを呼び出す
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] CSS - カーソルを置いたときに塗りつぶしの色を変更する - SVG PATH
-
[解決済み] bootstrapでボタンにリンクを貼るには?
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] input type="button "に背景画像を追加するには?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?
-
[解決済み] Zalgoテキストはどのように機能しますか?
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?