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


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


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.


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

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

# is meant 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.


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.


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.

Notice:

Some external website may block requesting their pages from another origin. Try to change the URLs of the hyperlinks in the example below to yahoo.com or google.com, for example, and checkout your browser's console.

Jsbin example