web-dev-qa-db-ja.com

空のiframe srcは有効ですか？

Iframeに最初はsrcを空白にしてから、ページが読み込まれるようにします。 JS関数を呼び出して、src値を実際の値に設定します。

<iframe src="#" />も有効ですOR javascript:;などのようなものを使用する必要がありますか

javascripthtmlcssiframe
66
testndtv

ちょうど<iframe src='about:blank'></iframe>

91
ariel

HTML 5のワーキングドラフト、 セクション4.8.2 は、次のように述べています（私の強調）：

src属性は、ネストされたブラウジングコンテキストに含まれるページのアドレスを提供します。属性は、存在する場合、スペースで潜在的に囲まれた有効な空でないURLでなければなりません。

RFC 3986 によると、有効なURLは scheme name で始まる必要があり、相対参照は fragment のみで構成することはできません。

したがって、#は有効なURLではないため、src属性の値として使用しないでください。

代わりに about：blank を使用してください。

47
Frédéric Hamidi

いいえ、空のiframe srcを指定するのは無効です

<iframe src="about:blank" />を使用する必要があります。

#は、現在のページ内のアンカーへの参照（または、AJAXリクエスト）。 iframeは現在のページのコンテンツを参照せず、AJAXリクエストでは使用されないため、iframeのソースとして使用しても意味がありません。

about:blankは、空白のドキュメントを表示するためのクロスブラウザ標準です。

2012年6月8日更新：

src属性が欠落している場合、 'living' spec はiframeを無効にしないようです：

要素の作成時にsrcdoc属性が設定されておらず、src属性も設定または設定されていないがその値を解決できない場合、ブラウジングコンテキストは最初のabout：blankページに残ります。

ただし、これらの属性の両方が設定されていない場合、ブラウジングコンテキストはデフォルトでabout:blankになります。適切な後方互換性を提供するために、冗長にすることをお勧めします。現時点では、about:blank URLを指定します。

23
Aron Rotteveel

Srcを完全に省略することもできるようです：

http://dev.w3.org/html5/spec/Overview.html#the-if​​rame-element

要素の作成時に、srcdoc属性がnot setであり、src属性がでもない場合setまたはsetですが、その値を解決できない場合、ブラウジングコンテキストは最初のabout：blankページに残ります。

10
rjmunro

About URIスキーム標準の一部として、about：blankは非常に優れたブラウザーサポートを備えているため、おそらく最適なオプションです。

about：blankメディアタイプがtext/htmlで文字エンコードがUTF-8の空のHTMLドキュメントを返します。これは、空白ページをHTML内のiframeなどのブラウジングコンテキストにロードするために広く使用されており、スクリプトによって変更される場合があります。 詳細はこちら

1
Selay

src属性でabout:blankを使用できます（先ほどarielが述べたように）。そうしないと、セキュリティで保護されたページから提供するときにエラーがスローされます。

安全なページhttpsは、安全でないWebサイトに安全でない可能性のあるデータのエラーをスローします。

1
Naveed Butt

Javascriptを介してiframeを追加してみてください。HTMLに空のiframeを含める必要はありません。

（jQueryの例）

<script type="text/javascript">
$().ready(function() {
    $("<iframe />").attr("src", "http://www.bbc.co.uk/").appendTo("body");
});
</script>

Javascriptを使用してiframeを追加すると、適切な低下が可能になります。Javascriptを使用していないユーザーには、空のiframeが表示されません。

1
whostolemyhat

about:blankを使用したくない場合は、次の例のようにsrcのiframeとしてjavascriptを使用できます。

<iframe name="TV" id="tv" style="width:100%; background: #800000" src="javascript:document.write('<h3>Results Window</h3>')"></iframe>

上記の例は、単純なメッセージ<h3>Results Window</h3>を持つ栗色の背景でiframeを初期化します。ただし、リンクのターゲットはiframename属性、つまりその例ではTVと等しくなければなりません。

1
SaidbakR

記録のために

次の例を考えてみましょう（Firefox 58ですが、すべてのブラウザに存在する可能性があります）。

<link href="css.css" rel="stylesheet" type="text/css"/>
<iframe src='about:blank'></iframe>

Iframeはcssの前にロードされるため、cssがロードされる前にページのレンダリングが表示されます。つまり少しの間、ページはcssなしで表示されます。

代わりに：

<link href="css.css" rel="stylesheet" type="text/css"/>
<iframe src='blank.html'></iframe>

正常に動作し、cssがロードされ、iframeが最終的にロードされます。

0
magallanes