Iframe scroll due to the links inside it
I have a page with a fixed header div like a tool bar and an Iframe which loads content form the same/different domains.
The problem is whenever a link inside the iframe is clicked, it scrolls the page to the top hiding the toolbar itself. This happens in desktop/mobile webkit browsers.
Note:- I found the reason for why the iframe scrolls the parent page when any link inside it is clicked, it turns out that if the anchor tags within the iframe have empty hash values i.e href=”#” and if they are clicked then it causes the parent page to scroll to point from where the iframe starts. This happens in webkit browsers only for me. This is not reproducible in FF.
2 Solutions collect form web for “Iframe scroll due to the links inside it”
ifrm.setAttribute("onload","scroll(0,0);"); //(ifrm is the id of the iframe)
and in your html for iframe, add an onload attribute as below:
<iframe name="iframe" onload="totop()">
When clicked, this will automatically scroll the window to a certain point (200 pixels down from the top). Or, you can have it auto scroll on page load using this:
Okay, here’s another solution that seems to work (a modified version of this page:
First, make pages: home.html, container.html & website.html
On home.html, put this:
<html> <head> <title>Home</title> </head> <frameset rows="*,1000"> <frame src='container.html' noresize='yes' frameborder='0' marginheight='0' marginwidth='0' scrolling='no'> <frame src='website.html' noresize='yes' frameborder='0' marginheight='0' marginwidth='0' scrolling='no'> </frameset> </html>
<html> <head> <title>Container</title> </head> <body bgcolor='#ff0000'> Any content you want... </body> </html>
<html> <head> <title>Website</title> </head> <body onLoad="window.scrollTo(0,150)"> <iframe id='iframe' src='http://www.cnn.com" height='1000' width='100%' frameborder='0' marginheight='0' marginwidth='0' scrolling='no'> </iframe> </body> </html>
Now here’s the thing – no matter what page you go to from that start page on cnn.com, the page will always shift 150 pixels downward. On home.html, the 1000 refers to pixels going upwards from bottom to top of page. So if you set it to 100, you will see the container.html page in the top part of the browser and at the bottom 100 pixels you will see website.html (with its content shifted 150 pixels downward). The reason why I made the height so high (1000) is that it will allow the full height of the browser window to be utilized – no one will even see container.html unless you want them to. You may have to mess with the values/scrolling/etc. to get what you need exactly.
This should get you working!