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.

Reputation: 50662

iframe without an src attribute

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.

Upvotes: 25

Answers (10)

Alberto Carreras

Reputation: 1

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

Upvotes: 0

sv_in

Reputation: 14049

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

Upvotes: 3

rjmunro

Reputation: 28096

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

Upvotes: 1

Steve Magruder

Reputation: 11

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.

Upvotes: 1

J C

Reputation: 11

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>

Upvotes: 0

Pekka

Reputation: 449803

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.

Upvotes: 6

nefarioustim

Reputation: 110

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).

Upvotes: 7