Inside an iframe (on page-A), I have a simple page (page-B) that has a few jump links (e.g. <a href="#my-id">jump link</a>) to different sections of the page (page-B). The iframe height is preset to be longer than page-B‘s height; this is a requirement.
For some reasons, the jump links didn’t work on FF (I am on Mac/FF 10.0.2); however, it worked properly on Safari and IE8. This is the sample page.
Code of page
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jump Link Test on an iFrame</title>
</head>
<body>
<h1>Page that has an iFrame</h1>
<iframe width="100%" height="2000" src="./iframe.html" frameborder="0" scrolling="no">
</iframe>
</body>
</html>
Code of iframe.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>iFrame Content</title>
<style type="text/css">
.box {
margin: 0 0 5px;
width: 400px;
height: 400px;
}
#box1 {
background-color: #f00;
}
#box2 {
background-color: #f0f;
}
#box3 {
background-color: #00f;
}
</style>
</head>
<body>
<ul>
<li><a href="#box1">Box 1</a></li>
<li><a href="#box2">Box 2</a></li>
<li><a href="#box3">Box 3</a></li>
</ul>
<div>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
</div>
</body>
</html>
Note: If I set the iframe height < page-B‘s height, the problem will be solved. However, unfortunately this isn’t an option given my situation because I have no access to page-A.
This is not possible with HTML only.
As you can read on the Firefox Bug Report Nr. 638598 this is mentioned long time ago! Also many people don’t like that behavior, but Jonas Sicking says in his comment that this will never change. He sees that as a feature that firefox prevent this potential hacking functionality.
if you don’t know him read here that he is the Tech Lead of the web-api project at mozilla as well as an editor for the indexeddb and file-api specifications at W3C.
Other people tried to find solutions like Matthew but this example didn’t work in my short test case with your html structure. Some others say that it should work with JavaScript and the
scrollTo()Function.I’m sorry for saying that this is a limitation of FireFox only, but hope you are happy to be safe in the knowledge about that problem.