iframe without an src attribute
Solution 1
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).
Solution 2
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?
Solution 3
What about
about:blank
Solution 4
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.
Solution 5
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
Related videos on Youtube
Paul Tarjan
I'm a Distinguished Engineer at Robinhood. I used to be the Tech Lead of Developer Productivity at Stripe where I built Sorbet. Before that I was the CTO and cofounder at Trimian. Before that I was a Software Engineer at Facebook on HHVM and the Open Graph. Before that I was the Tech Lead for Yahoo! SearchMonkey. See my homepage for more.
Updated on October 03, 2020Comments
-
Paul Tarjan over 3 years
I would like to create an
<iframe>
on the page, but then add thesrc
later. If I make an iframe without ansrc
attribute, then it loads the current page in some browsers. What is the correct value to set for thesrc
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.
-
Pekka over 13 yearspossible duplicate of iFrame src something other than javascript:false but same effect
-
Ioannis Karadimas over 13 yearsYou could create the iframe at the moment you have the src available, to avoid this issue. Would that work?
-
Paul Tarjan over 13 yearsThat 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 over 13 years@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 over 13 yearsFor your first answer, that pays an unnecessary HTTP round trip, which seems sub-optimal.
-
Pekka over 13 years@Paul but the second answer is spot on if you're planning to populate the iframe using js
-
Paul Tarjan over 13 yearsFor your second answer, I'm populating the iframe with form submit. So I want the iframe on the page, and then the <form> sets the src.
-
Paul Tarjan over 13 yearsThe 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.
-
Ioannis Karadimas over 13 yearsTested in IE7,8(+quirks mode), FF3.6, Opera 10.63, Safari 5, Chrome 7.0.x - About:blank presents the most consistent behavior.
-
Pekka over 13 years@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 over 13 yearsIt's not part of a standard though so, like
javascript:
, you can't rely on every client interpreting it correctly -
Paul Tarjan over 13 yearsMostly good testing. Still missing IE 6, FF 3, Safari 4, Chrome 5 and Chrome 6. And could OS matter here?
-
Crescent Fresh over 13 yearsThe OP has stated that the iframe must be created some time before its
src
will be known (see comment history to the question itself). -
TRiG about 12 yearsDon't apologise for answering old questions.
-
Martijn Pieters over 11 yearsThere will always be more dumb spiders, though.
-
Dan over 11 yearsWhat about Konqueror, @IoannisKaradimas? My point is, if it's not in the standard, you can't assume that every user will see it correctly.
-
rgripper about 10 yearsYes, 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.
-
Leigh McCulloch over 9 yearsThis 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 over 9 yearsThis 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. -
siannopollo over 9 yearsAdding 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. -
James Moberg over 5 yearsI 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 thatabout:blank
may be the preferred method to use.)