Is an empty iframe src valid?

javascript

iframe

dynamic-content

cross-origin-requests

byAlex Kataev·Jan 9, 2025

Absolutely! Simply set the iframe's src as about:blank. It guarantees a valid and consistent empty state like this:

<iframe src="about:blank"></iframe>

This approach averts compatibility hiccups that could come up with truly empty src attributes across various web browsers. On another note, if you're thinking of loading the iframe dynamically, leaving the src attribute blank initially and setting it via JavaScript afterward could be a clean and practical solution.

Driving dynamic content with JavaScript

Suppose you need to pump dynamic content into the iframe after the page loads:

// "Look ma, no hands!"
document.getElementById('myIframe').src = 'https://www.example.com';

This technique enables you to add a personal touch to iframe initialization with dynamic content or a custom spinny 'Loading...' GIF or transitional background color - certainly a crowd pleaser!

Iron out errors, run down events

Keep your eyes peeled on the browser console for errors when experimenting with different iframe src URLs. Hell hath no fury like a security policy scorned! External websites might block iframe requests from different origins due to various security protocols. Always stay on the safe side by checking for console warnings and errors and ensuring required cross-origin permissions are intact.

Think of traveling light, using just your name:

<iframe src="about:blank" name="myframe"></iframe>
<a href="https://www.example.com" target="myframe">Open in iframe</a>

Now, that will assure your hyperlinks to step right into the designated iframe. Smooth, isn't it?

Standards, best practices, and RFC 3986

Follow RFC 3986, my young Padawan! Kickstart your iframe URLs with a scheme to make them valid... or arouse the wrath of the spec! about:blank is the sweet spot, a universal language understood by all browsers that carries the promised empty state of your iframe.

Security first, always!

Embedding content from external origins? Remember, Uncle Content Security Policy (CSP) is watching! It can pull the plug on an iframe payload that ignores security permissions and protocols. So plan wisely!

Spicing up iframe functionality

A touch of personality to your iframes can win hearts. How about a custom background color or a sempiternal loading message before the content loads?

// Our newborn iframe
var iframe = document.createElement('iframe');
iframe.src = 'about:blank';
iframe.style.backgroundColor = 'lightblue';
document.body.appendChild(iframe);

// Filling in content... but first, a message!
iframe.contentWindow.document.write('Patience, young Padawan...');