90

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

kapa
  • 77,694
  • 21
  • 158
  • 175
copenndthagen
  • 49,230
  • 102
  • 290
  • 442
  • 2
    I see `about:blank` everywhere. – pimvdb May 10 '11 at 07:29
  • 1
    I believe if you omit the `src` attribute browsers default to `about:blank`. – Jim Blackler May 10 '11 at 07:31
  • Of you leave the `src` empty, the browser will figure it out. Not all browsers might have a `about:blank`. – Rudie May 10 '11 at 07:35
  • 1
    @Jim, omitting the `src` attribute in secure pages will trigger the infamous "this page contains both secure and unsecure items" message in some versions of Internet Explorer. – Frédéric Hamidi May 10 '11 at 07:39
  • 1
    I just found out that jQuery will fire the document ready event twice, because of the # as a src. Took me quite awhile to find out ;-) – Jos May 08 '15 at 08:09

11 Answers11

127

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

ariel
  • 15,620
  • 12
  • 61
  • 73
58

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.

Community
  • 1
  • 1
Frédéric Hamidi
  • 258,201
  • 41
  • 486
  • 479
  • 6
    No, the valid non-empty URL is required to be a valid URI *reference* as defined by RFC3986 section 4.1, not necessarily a valid URI. Otherwise you couldn't use a relative URL as an iframe src, which is clearly nonsense. – mrec Dec 20 '12 at 12:54
  • @Mike, you're right, and `#` is also an invalid relative reference. Answer updated accordingly. – Frédéric Hamidi Dec 20 '12 at 13:16
  • Is a Javascript: URI valid? Like this: http://stackoverflow.com/q/1689215/328397 – makerofthings7 Mar 29 '13 at 22:54
  • As a side note, if you use `#` as your src value, Chrome will "jump" the page down to the iframe. Imagine if you had an anchor tag `` right above your iframe. Chrome behaves as if your URL was `mypage.html#anchor`. – howcheng May 20 '14 at 23:47
  • 1
    The "if present" suggests that you can also omit the `src` attribute entirely (`` with no `src=`). – ShreevatsaR Jan 04 '17 at 23:16
30

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.

Community
  • 1
  • 1
Aron Rotteveel
  • 81,193
  • 17
  • 104
  • 128
  • 1
    For those looking for a full reference or "proof", the `about:` scheme was [standardized](http://en.wikipedia.org/wiki/About%3a_URI_scheme) in 2010. – mindplay.dk Aug 28 '13 at 20:01
11

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.

rjmunro
  • 27,203
  • 20
  • 110
  • 132
  • 1
    One annoyance that might trip you up there, is in Chrome, where `src=""` will cause the previously loaded page to reload if you reload the parent page, which probably isn't what you want. `about:blank` is probably a better bet. – mindplay.dk Aug 28 '13 at 19:57
3

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

SaidbakR
  • 13,303
  • 20
  • 101
  • 195
2

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.

Naveed Butt
  • 2,861
  • 6
  • 32
  • 55
1

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

Selay
  • 6,024
  • 2
  • 27
  • 23
1

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.

whostolemyhat
  • 3,107
  • 4
  • 34
  • 50
0

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.

magallanes
  • 6,583
  • 4
  • 54
  • 55
0

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=""

0

Raw HTML and JavaScript example.

You could just load in your iframe when some event happens. As long as you have a HTML element ready to accept an iframe.

Below, an iframe will appear only if this paragraph element is clicked. So technically it will be blank until a click happens.

HTML

<body>
<p id=iFrameParagraph></p>
</body>

JavaScript

var pFrame = document.getElementById("iFrameParagraph"); //iframe paragraph

pFrame.addEventListener('click' ,function() {
    pFrame.innerHTML="<iframe src=\"./path/to/file\" frameborder=\"0\" height=\"400\" width=\"95%\"></iframe>"; 
});
FatherlyNick
  • 33
  • 5