Skip to Content

How to use iframe in background?

Embedding iframes in the background can be useful for a variety of purposes, such as loading content from another site without disrupting the look and feel of your main page. However, there are some important considerations when using iframes in this way.

What is an iframe?

An iframe (inline frame) is an HTML element that allows you to embed another webpage within your current page. The iframe creates a separate window that loads the external content. For example:

<iframe src=""></iframe>

This would display the content from inside an iframe on your page. The key thing is that the iframe acts as a completely independent document, separate from the rest of your page.

Why use an iframe in the background?

There are a few reasons you may want to load content in an iframe in the background:

  • Display content from another site without affecting your page design – the iframe keeps the external content separate.
  • Load advertisements asynchronously without impacting performance.
  • Pull in remote content to be used by JavaScript on your page.
  • Embed videos or other media from another source.
  • Allow communication between documents on different domains for APIs like payment buttons.

The key benefit is that you get the advantages of external content or code running on your page, but without it altering or conflicting with your existing CSS/JavaScript.

How to load an iframe in the background

There are a couple approaches to loading an iframe in the background:

1. Hide with CSS

The easiest method is to simply include the iframe code as normal then use CSS to hide it from view:

<iframe src="" class="hidden-iframe"></iframe>

.hidden-iframe {
  width: 0px;
  height: 0px;
  border: none;
  display: none;

This loads the iframe as usual, but the CSS hides it visually on the page. The content is still loaded in the background.

2. Dynamically generate iframe

Another approach is to dynamically generate the iframe using JavaScript:

  let iframe = document.createElement('iframe');
  iframe.src = ''; = 'none';

This creates the iframe element in JavaScript and sets it to load the external page. We add display: none to hide it, then append it to the document to load it. This has the advantage of only loading the iframe when the page is ready.

Considerations when using background iframes

There are some important considerations when embedding iframes in the background:


Iframes can impact page load performance – you are loading an external page within your page. Size and number of iframes should be minimized.


Search engines may penalize pages with “hidden” content. Use essential iframes only.


Embed content over HTTPS to avoid mixed content warnings. Validate the source to prevent XSS attacks.


Screen readers may not pick up content in hidden iframes. Ensure they are not required for core functionality.

Cross-Domain Communication

Parent and iframe documents are separate – you may need to enable communication via postMessage API.

Examples of using iframes in the background

Some examples of common use cases for background iframes:

Displaying third party content

<iframe src="" class="hidden-iframe"></iframe>

Pull in content from another site such as embedded social media feeds, ads, or videos without affecting layout.

Asynchronous loading of ads

  let iframe = document.createElement('iframe');
  iframe.src = '';

Load ads asynchronously to avoid blocking page rendering. Out of view iframe prevents flicker.

Using APIs from another domain

<iframe id="api-frame" src=""></iframe>

  let frame = document.getElementById('api-frame');
  frame.contentWindow.postMessage({price: 100}, ''); 

Enables secure cross-domain communication for payment platforms, social media, etc.

Best practices when using background iframes

To ensure background iframes are used properly, keep these best practices in mind:

  • Use HTTPS and only load trustworthy external content.
  • Reduce iframe count and filesize for better performance.
  • Avoid overuse for SEO – check with search guidelines.
  • Test accessibility without iframes visible on page.
  • Enable communication via postMessage API if the iframe will be interacted with.
  • Lazy load non-critical iframes to improve load time.
  • Always validate input if allowing user-supplied iframe URLs.

Tools for working with iframes

Some helpful tools when working with iframes:

Tool Description
Postman Allows testing cross-domain postMessage communication.
iframe Resizer Dynamically sets height/width of iframe to fit content.
Responsive Embed Makes iframes responsive for different device sizes.
iframe Loader Handles lazy loading iframes as they enter the viewport.

Common questions about background iframes

Can you tell if a site uses background iframes?

View page source to see iframe code, or use browser DevTools to inspect all frames on the page. However, dynamically added iframes via JavaScript won’t be visible in page source.

Do background iframes use data?

Yes, iframes will load external resources as normal – so they incur data usage like images/video. Minimize iframes if concerned about data consumption.

Are iframes bad for SEO?

Generally, hidden content and duplicate content should be avoided. But minimal, unobtrusive iframe usage is unlikely to pose an issue. As always, aim to satisfy users first.

Can I lazy load an iframe?

Yes, iframes can be lazy loaded in combination with IntersectionObserver API. This delays loading until the iframe is near the viewport.


Iframes are a useful tool for embedding external content in the background. With careful implementation, they allow you to asynchronously load resources without impacting the user experience. Just be mindful of performance, accessibility, SEO, and security best practices when leveraging background iframes in your projects.