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:
- Rename the Index.html to another name (i.e. home.html, start.html)
- 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
Leave a comment
You must be logged in to post a comment.
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
Hi Gale , Happy to hear you found the blog useful.
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.
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.
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.
This is my first time go to see at here and i am in fact impressed to read
all at one place.
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.
. . . . .
I am sure this piece of writing has touched all the internet
viewers, its really really fastidious post on building up new webpage.
What’s up, after reading this amazing paragraph i am too delighted to
share my knowledge here with mates.
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.
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.
You should be a part of a contest for one of the finest sites on the net.
I am going to recommend this blog!
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!
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!