iFrames have been available since the early days of the internet. You can embed the content of another website on your own website. While there were several changes (mostly security-related) to the implementation and interpretation of iFrames in different browsers, it is still a good and simple way to embed external content.
Table of Contents
How to use an iFrame
Adding an iFrame is quite simple. It’s just a short HTML tag that can be used within WordPress like so:
<iframe width="100%" height="500px" src="https://patrickposner.dev/"></iframe>
The result should look like this:
Additional Parameters for iFrames
In my example above, I already added width and height as parameters to customize the iFrame. A couple of other parameters allow you to further customize the appearance of the embedded website.
This parameter allows visitors to see the embedded iFrame in fullscreen mode.
<iframe allowfullscreen="true" src="https://patrickposner.dev/"></iframe>
Usually, iframes are render-blocking. That means they are bad for pagespeed and because of this, there is now a loading parameter that can be set to lazy. This way, the content will be loaded in the background and no longer interfere with your website.
<iframe loading="lazy" src="https://patrickposner.dev/"></iframe>
You can find a list of all available parameters here.
Problems with iFrames
There are a couple of security restrictions in place by default within servers and browsers to prevent abusing iFrames for content theft. Because of that, a couple more steps can be involved to make that work for you.
This is quite a huge topic. That is why I recommend reading the basics at MDN Web Docs.
You may need to adjust your server to allow Cross-Origin requests from your static website to your dynamic website. Simply Static Pro already does some of these things for you, but some things need to be done on the server level directly.
Why do you want to use iFrames on your static website?
The main reason to use iFrames on your static website is to make dynamic parts work.
Many WordPress plugins aren’t optimized for static websites due to their reliance on Ajax. While there are always working alternatives for various plugins, there is almost always at least one that can work without Ajax and is optimized for static sites.
iFrames are a great way to embed ajax-functionality on your static website and use your dynamic website to process these requests.
If playing around with HTML isn’t yours, that’s fine too. A powerful free plugin is available at the w.org repository called Advanced Iframes. You can do everything mentioned above and more (like showing only specific areas of your website within the iframe).
Ajax – What is it, and why it’s used?
Ajax is a way to dynamically update parts of your website without forcing a reload of your entire website. This is quite common nowadays as it provides a better UX for visitors.
I found this little image showing how the concept of Ajax technically works:
You often see those methods used in form plugins and in things like “Load More” features or to enable live search with auto-suggestions on your website.
Elementor Forms – a practical example
Elementor is the most popular page builder for WordPress. Elementor Pro also ships with a form module to embed forms into your website without requiring an additional form plugin. That’s great if all you need are basic forms.
Setting up the form
I set up a simple WordPress website with Elementor, and Elementor Pro installed and added the form module to a page. I didn’t touch any specifics here, just the pretty basic form with name, e-mail, and message.
Setting up the iframe
I now created a new page and added the iframe to it. The source of the iframe points to the URL of the Elementor Form page.
Excluding the original page from the iFrame
Now we have two pages that have the same content. One is the original content, the other one simply embeds the page within an iframe. Now we exclude the original page from the static export. Visit Simply Static -> Settings -> Include/Exclude and exclude the URL:
That’s it. Make sure you link to the page that contains the iframe and exclude the page that contains the form within Simply Static.
Start a new static export within Simply Static, and you are ready. Simply Static does not replace the src from iFrames to make that work (so you don’t have to worry about that!).
Apply CSS only to pages that are loaded within an iframe
I already mentioned the Advanced iFrame plugin that can show just parts of your page within an iFrame. If you don’t want to use a plugin for that, here is a little code snippet that allows you to inject CSS into the page only if it’s loaded as an iFrame.
This little code snippet adds an “in-iframe” class to the body of your page as soon as it’s loaded within an iframe. This way, you can easily apply CSS to it and customize the page.
In our Elementor Forms example, we may want to hide the header and footer and only show the form:
To only apply that for the header within an iframe, we combine it with the “in-iframe” prefix class. For that, I added a little code snippet within Elementor like so:
Now you can add as many CSS styles as you like to modify the embedded page within an iframe. Removing the header already produced quite a good result for my little example, but feel free to customize it further based on your needs.