Is an empty iframe src valid?

问题:

I want an iframe to initially have src as blank and then once the page loads; call a JS function and then set the src value to an actual one..

So is <iframe src="#" /> valid OR do I need to use something else like javascript:;, etc

回答1:

just <iframe src='about:blank'></iframe>

回答2:

The HTML 5 working draft, section 4.8.2, says (emphasis mine):

The src attribute gives the address of a page that the nested browsing context is to contain. The attribute, if present, must be a valid non-empty URL potentially surrounded by spaces.

According to RFC 3986, valid URLs must begin with a scheme name, and relative references cannot only consist in a fragment.

Therefore, # is not a valid URL, and should not be used as the value of the src attribute.

Use about:blank instead.

回答3:

No, it is not valid to specify an empty iframe src.

You should use <iframe src="about:blank" />.

# is ment to be a reference to an anchor within the current page (or, often used as a routing scheme when working with AJAX requests). Using it as the source of an iframe would be senseless, since an iframe does not reference content on the current page and is not used with AJAX requests.

about:blank is a cross-browser standard to display a blank document.

Update June 8th 2012:

It seems that the 'living' spec no longer renders an iframe invalid if the src attribute is missing:

If, when the element is created, the srcdoc attribute is not set, and the src attribute is either also not set or set but its value cannot be resolved, the browsing context will remain at the initial about:blank page.

If both of these attributes, however, are not set, the browsing context will default to about:blank. To provide proper backwards compatibility, it's recommendable to be verbose and, for now, provide the about:blank url.

回答4:

It looks like you can also leave out the src completely:

http://dev.w3.org/html5/spec/Overview.html#the-iframe-element

If, when the element is created, the srcdoc attribute is not set, and the src attribute is either also not set or set but its value cannot be resolved, the browsing context will remain at the initial about:blank page.

回答5:

You can use about:blank in the src attribute (as mentioned by ariel earlier), otherwise it would throw an error when serving from a secure page.

A secure page https would throw an error of possibly un-secure data on the secure website.

回答6:

You could try adding the iframe through Javascript, so you wouldn't need to have a blank one in the HTML:

(jQuery example)

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

Adding the iframe with Javascript allows graceful degradation - users without Javascript won't see a blank iframe.

回答7:

As part of the about URI scheme standard, about:blank is probably the best option as it has very good browser support.

about:blank Returns a blank HTML document with the media type text/html and character encoding UTF-8. This is widely used to load blank pages into browsing contexts, such as iframes within HTML, which may then be modified by scripts. You can see further here

回答8:

For the record

Let's say the next example (Firefox 58 but may be its present in all browsers).

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

Iframe is loaded BEFORE the css so the render of the page is visible before the css is loaded. I.e. for a split of a second, the page looks without a css.

Instead:

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

It works fine, the css is loaded and the iframe is loaded finally.

回答9:

If you don't want to use about:blank you may use javascript as an src for your iframe like the following example:

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

The above example will initialize an iframe with maroon background that has a simple message <h3>Results Window</h3>. However, the targets of your links should equals the iframe name attribute i.e in that example TV.