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.

14 Comments

  1. Sender Name Undisclosed on June 26, 2020 at 6:16 am

    Very well done & written!
    I started bloogging in thee past few weeks and observed that many
    bloggers simply rehash old ideas buut add very littlle of value.
    It’s great to read aan informative write-up of some real
    value to myself and your other followers.
    It’s going onn my list of details I need to emulate as
    a new blogger. Reader engagement and content quality are king.

    Some great suggestions; you have absolutely got on my list of people to follow!

    Keep up the terrific work!
    All the best,
    Gale

    • Guy Maimon on July 1, 2020 at 12:29 pm

      Hi Gale , Happy to hear you found the blog useful.

  2. Sender Name Undisclosed on January 9, 2021 at 11:22 pm

    I’ve read a few good stuff here. Certainly price bookmarking for revisiting.
    I wonder how so much effort you put to create this type of great informative web site.

  3. Sender Name Undisclosed on January 10, 2021 at 6:35 pm

    I always used to study piece of writing in news papers but
    now as I am a user of web thus from now I am using net
    for content, thanks to web.

  4. Sender Name Undisclosed on January 11, 2021 at 2:34 pm

    I’m gone to convey my little brother, that he should also
    pay a quick visit this weblog on regular basis to take updated from hottest gossip.

  5. Sender Name Undisclosed on January 13, 2021 at 6:13 am

    This is my first time go to see at here and i am in fact impressed to read
    all at one place.

  6. Sender Name Undisclosed on January 13, 2021 at 11:47 pm

    Hiya very cool blog!! Guy .. Beautiful .. Wonderful ..

    I’ll bookmark your website and take the feeds also?
    I’m satisfied to seek out a lot of helpful information here in the submit, we’d like develop extra
    techniques on this regard, thank you for sharing.

    . . . . .

  7. Sender Name Undisclosed on January 15, 2021 at 7:07 pm

    I am sure this piece of writing has touched all the internet
    viewers, its really really fastidious post on building up new webpage.

  8. Sender Name Undisclosed on January 19, 2021 at 5:36 am

    What’s up, after reading this amazing paragraph i am too delighted to
    share my knowledge here with mates.

  9. Sender Name Undisclosed on January 26, 2021 at 12:34 am

    I was very happy to uncover this great site.

    I wanted to thank you for ones time due to this fantastic read!!
    I definitely liked every bit of it and I have you book marked to
    check out new stuff in your web site.

  10. Sender Name Undisclosed on January 28, 2021 at 4:38 am

    I enjoy what you guys are usually up too. This type of clever work and
    coverage! Keep up the very good works guys I’ve you guys to my own blogroll.

  11. Sender Name Undisclosed on February 9, 2021 at 11:09 pm

    You should be a part of a contest for one of the finest sites on the net.
    I am going to recommend this blog!

  12. Sender Name Undisclosed on February 11, 2021 at 7:58 am

    This is very interesting, You are a very skilled blogger.
    I have joined your feed and look forward to seeking more of your
    magnificent post. Also, I’ve shared your website in my social networks!

  13. Sender Name Undisclosed on February 11, 2021 at 5:11 pm

    Hey there this is somewhat of off topic but I was wondering if
    blogs use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding know-how so I wanted to get advice from
    someone with experience. Any help would be greatly appreciated!

Leave a comment

You must be logged in to post a comment.