25

I would like to create an <iframe> on the page, but then add the src later. If I make an iframe without an src attribute, then it loads the current page in some browsers. What is the correct value to set for the src so that it just loads a blank iframe?

The answers I've seen are:

  • about:blank
  • javascript:false
  • javascript:void(0)
  • javascript:"";
  • url to a blank page

Is there a clear winner? If not, what are the tradeoffs?

I'd like to not have mixed content warnings for HTTPS urls, nor any back-button, history, or reload weirdness in all browsers from IE6 onward.

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
Paul Tarjan
  • 48,968
  • 59
  • 172
  • 213
  • possible duplicate of [iFrame src something other than javascript:false but same effect](http://stackoverflow.com/questions/2503648/iframe-src-something-other-than-javascriptfalse-but-same-effect) – Pekka Nov 26 '10 at 10:51
  • 1
    You could create the iframe at the moment you have the src available, to avoid this issue. Would that work? – Ioannis Karadimas Nov 26 '10 at 10:52
  • 3
    That question was asking for prettier way to write "javascript:false". I don't care how ugly the line is, I want the functionality. And the accepted answer was a url to a blank page which pays an HTTP round-trip which seems worse than being able to avoid that. – Paul Tarjan Nov 26 '10 at 10:54
  • @Ioannis no, it is a long story, but assume I need the iframe on the page, then the url will be populated later. – Paul Tarjan Nov 26 '10 at 10:55

10 Answers10

10

Not sure if all browsers support "about:blank", so I'd just go with your own blank page then.

Another idea: Why not add the whole iframe using javascript instead of just the src?

Mario
  • 35,726
  • 5
  • 62
  • 78
7

Standard approach when creating an "empty" iframe (as an iframe shim, for example), is to set the src as javascript:false;. This is the method used by most of the JavaScript libraries that create iframe shims for you (e.g. YUI's Overlay).

nefarioustim
  • 110
  • 3
  • Yes, in IE9-10 iframe writes text "javascript:false;". In this case it's better to check and use src="" if not IE or if IE > 9. For IE9 - well, bad luck. PS "javascript:'';" works everywhere but calls onload twice in some browsers. – rgripper Jun 23 '14 at 08:42
  • 2
    This may work in all browsers but will break if a website does not allow inline javascript in their `Content-Security-Policy` header. Therefore please don't use this in scripts that you expect other parties to include in their sites. – Leigh McCulloch Oct 30 '14 at 17:51
  • I agree w/@LeighMcCulloch. I've enabled CSP and `javascript:false` is being reported as an unsafe script-src directive when using Facebook SDK. (I believe that `about:blank` may be the preferred method to use.) – James Moberg Nov 01 '18 at 22:46
6

What about

about:blank
Jan Sverre
  • 4,617
  • 1
  • 22
  • 28
  • 1
    Tested in IE7,8(+quirks mode), FF3.6, Opera 10.63, Safari 5, Chrome 7.0.x - About:blank presents the most consistent behavior. – Ioannis Karadimas Nov 26 '10 at 11:08
  • It's not part of a standard though so, like `javascript:`, you can't rely on *every* client interpreting it correctly – Pekka Nov 26 '10 at 11:09
  • 1
    Mostly good testing. Still missing IE 6, FF 3, Safari 4, Chrome 5 and Chrome 6. And could OS matter here? – Paul Tarjan Nov 26 '10 at 11:25
  • What about [Konqueror](http://www.konqueror.org/features/browser.php), @IoannisKaradimas? My point is, if it's not in the standard, you can't assume that every user will see it correctly. – Dan Jan 13 '13 at 22:45
6

Re your comment clarifying that you're planning to use the iframe as the target for a form submission:

I would use an empty document on the server that sends back a 204 no content.

It avoids

  • "mixed content" warnings in IE and HTTPS mode
  • Unnecessary errors because a client doesn't understand the javascript: protocol
  • and other exotic shenanigans.

It's also valid HTML.

So what if it generates an extra request? Set the caching headers right, and there will be only one request for each client.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • The empty document is a possibility but I would much prefer to avoid it if possible. One less thing to maintain. If the community can provide a solution that does everything the empty document does AND doesn't require the extra file, that is strictly better in my mind. – Paul Tarjan Nov 26 '10 at 11:06
  • 1
    @Paul I agree, such a solution would be perfect. But I have seen this question a number of times on SO, and it never came up. The best there seems to be is `about:blank` which works in most browsers – Pekka Nov 26 '10 at 11:08
  • Adding the 204 status code will not trigger the `onload` event to be fired on the iframe in some browsers, so this may not be the best approach if someone is looking to hook into that event. – siannopollo Oct 31 '14 at 17:06
3

javascript:false:
IE10 and FF (checked in v23 in Linux) will show 'false' as content.

javascript:void(0) && javascript:;:
IE will show 'cannot display the webpage' error in the iframe. Also, when setting the src from a valid url to javascript:void(0), the page will not get blank.

about:blank:
Works in all browsers but IE 9 sends an request to the server with path "null". Still the best bet IMO

Checkout http://jsfiddle.net/eybDj/1
Checkout http://jsfiddle.net/sv_in/gRU3V/ to see how iframe src changes on dynamic updation with JS

sv_in
  • 13,929
  • 9
  • 34
  • 55
1

javascript:false works in modern browsers.

What I've seen is that this only "fails" when dumb spiders try to load javascript:false as a page.

Solution: Block the dumb spiders.

Christian Specht
  • 35,843
  • 15
  • 128
  • 182
Steve Magruder
  • 11
  • 5
  • There will always be more dumb spiders, though. – Martijn Pieters Nov 12 '12 at 20:48
  • 1
    This may work in all browsers but will break if a website does not allow inline javascript in their `Content-Security-Policy` header. Therefore please don't use this in scripts that you expect other parties to include in their sites. – Leigh McCulloch Oct 30 '14 at 17:50
1

As I posted in this question: Is an empty iframe src valid?, it looks acceptable to just leave out the src= attribute completely.

Community
  • 1
  • 1
rjmunro
  • 27,203
  • 20
  • 110
  • 132
0

IMO: if you don't put the src, your page won't validate. But's about it. If you put a src="", your server will log many 404 errors.

Nothing is really wrong as in "damaging". But then, is it actually not wrong to use an iframe in itself?

°-

pixeline
  • 17,669
  • 12
  • 84
  • 109
0

Yes, I know I'm reviving an old thread. Sue me. I'm interested in the answer.

I don't understand why having the trigger being a form submit precludes dynamically creating the IFrame. Does this not do exactly what you want?

<html>
<head>
<script type="text/javascript">
function setIFrame(elemName, target, width, height) {
    document.getElementById(elemName).innerHTML="<iframe width="+width+" height="+height+" src='"+target+"'></iframe>";
}
</script>
</head>
<body>
<div id="iframe" style="width:400px; height:200px"></div>
<form onSubmit="setIFrame('iframe', 'http://www.google.com', 400, 200); return false;">
<input type="submit" value="Set IFrame"/>
</form>
</body>
</html>
J C
  • 11
0

I run into this line of code:

iframe.setAttribute("src", "javascript:false");

as well. I wanted to remove javascript:URL.

Found this note from the Web Hypertext Application Technology Working Group [Updated 2 October 2019]

[https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element][4.8.5_The_iframe_element]

The otherwise steps for iframe or frame elements are as follows:

If the element has no src attribute specified, or its value is the empty string, let url be the URL "about:blank".

Alberto Carreras
  • 1