Is an empty iframe src valid?
JavascriptHtmlCssIframeJavascript Problem Overview
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
Javascript Solutions
Solution 1 - Javascript
just <iframe src='about:blank'></iframe>
Solution 2 - Javascript
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.
Solution 3 - Javascript
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.
Solution 4 - Javascript
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.
Solution 5 - Javascript
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.
Solution 6 - Javascript
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.
Solution 7 - Javascript
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.
Solution 8 - Javascript
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
Solution 9 - Javascript
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.
Solution 10 - Javascript
if you do call your iframe with
javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(VARİABLES,,true,,false,)
in server side you can again have a src=""