DEV Community

Nathan
Nathan

Posted on • Originally published at natclark.com

Disabling iFrames With CSS

While you can't technically disable HTML iFrames, you can prevent user interaction and make them appear read-only.

In fact, you can do it in just two lines of code:

iframe {
    overflow: hidden;
    pointer-events: none;
}
Enter fullscreen mode Exit fullscreen mode

But wait!

That overflow: hidden declaration, which removes the iFrame's scrollbars, only works in Firefox.

So to ensure compatibility with all other modern browsers, you must set the scrolling attribute to no directly on your <iframe> tag:

<iframe src="/example.html" title="Example" scrolling="no">
Enter fullscreen mode Exit fullscreen mode

I think it's important to note that the scrolling attribute for <iframe> tags was actually deprecated in HTML5. However, most major browsers still support it.

Oh, and if all else fails, try adding the !important rule to your CSS declarations:

iframe {
    overflow: hidden !important;
    pointer-events: none !important;
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

Well, this is probably my shortest post yet. But personally, I definitely prefer concise and to-the-point solutions!

The ability to make iFrames "read-only" is quite practical, and I've saved this snippet for whenever I'm trying to generate a preview image of a page. I hope it helps you out too.

Thanks for reading.

Discussion (0)