HTML iFrame optimized

Allow me to start with a statement: I consider myself a beginner when it comes to HTML/CSS/JS, I’m actually an old-school developer, working mainly with C, C++, VB.NET, Python, Swift and some other programming languages and making my first steps in web-development lately

The HTML iframe tag is very powerful tool.
By definition, it allows the developer to add an HTML page inside an HTML page.

A common usage of iframe is the one we see in almost every multi-page web-site

Every web-site built of multiple pages has few pages like:

  • Index.html
  • About.html
  • ContactUs.html

The web-server in such case will be configured to redirect a request like https://www.example.com to the Index.html – which is the home page and load it.

While in the Index.html page, the address bar of the browser will show https://www.example.com

But when the user decides to use a link to another page in the web-site, i.e. the About.html page, the browser will show the full address – https://www.example.com/about.html

Furthermore: when the user will use a link to return to the home page, in most cases, the browser will show https://www.example.com/index.html.

And if that’s not enough, when the user will open an image, the address at might show something like: https://www.example.com/images/landscapes/image11.jpg

As a developer, you would like to obscure the page name:

  • To keep the address bar clean.
  • To keep the user from looking for the resources of the web-page
  • avoid applications from very easily collecting all your web-site’s data to the user’s computer.

Sometimes you will want to create a static infrastructure to the website over all the pages

This is where the iFrame tag becomes handy:

We can create a clean page with an iFrame , redirecting us to the main page of the web-site and, the iFrame will contain all the data shown on the screen and the address bar will always show only the base web-site address,  https://www.example.com.

To do this we need to:

  1. Rename the Index.html to another name (i.e. home.html, start.html)
  2. Create a new Index.html that will basically contain only the iframe itself.

the body of the new Index.html page should look like:

<body>
     <iframe src="./home.html"></iframe>
     <script>.......... </script
</body>

But this is exactly where it gets a little weird and annoying…..

The new iFrame will appear in a small box in the top-left side of the browser, with vertical and horizontal scroll bars.

so usually , every answer to a question about iFrame you may find in the web will say: add  height and width to the iFrame tag like

<iframe src="./home.html" width="100%" height="***px"></iframe>

Usually it looks fine in the beginning, but when the browser page is resized, you get a two scroll bars in the browser:

  • 1st: for the content of the home.html page
  • 2nd: for the iFrame (if the height is smaller than configured)

Some of you may shout now: “Hey , 100% !!!!!!!”, well, its not this way , since the height is determined by the data and not by the browser window itself , 100% will  make the iFrame around 150px high.

It gets even worse if you later want to add another iframe in another page (say a Contact Form in the ContactUs.html page)

and it gets on and on like a recursive function….

Hope you got the point.

I have seen websites that have 4 or 5 different scroll bars in a specific size of window.

Looking for solution online you may find many ideas:

  • With CSS: manipulating the scroll bar of one of the pages.
  • With CSS and HTML: creating specific width and height for the body and the iframe of the page.
  • With JavaScript: using the onLoad method, returning the height of the page.
  • With combination of CSS and JavaScript: digging deep inside the DOM to calculate and return variables to adjust the iFrame to your needs

and many other ideas: all of them leave you frustrated.

Yes, I have faced the same problem with a pure HTML/CSS/JS web-site i’ve re-designed that had 5 (!) iFrames one inside the other, and in the end, i found the solution, and surprisingly, it was much more simple than I thought

The solution is actually to avoid the browser any room for doubts and to configure every part of the CSS, like nothing was ever configured before.

This way, when you leave no attribute undefined, the browser does not need to think what to do with the content, it has all the answers from you.

The CSS code i have created looks something like:

iframe {
    position:fixed; 
    top:0; left:0; bottom:0; right:0; 
    width:100%; height:100%; 
    border:none; 
    margin:0; 
    padding:0;
    overflow:hidden; 
    z-index:999999;
 }

I did not believe it myself, but when I configured everything i got rid of all the scroll bars, completely.

In a web-site with a big main.css file with dozens of configurations for every element in the site, you will need to make it stronger by:

  • Giving the iFrame and ID
  • Adding a <style> tag in the head of the page
  • or even adding the style to the iFrame tag itself

so it will overcome every other configuration inherited by the page from somewhere.

Comments / Additions / Fixes will be appreciated.

Leave a Comment