Menu
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.
395
To embed an iframe in a content page, select Interactive layout, choose the HTML block and paste the iframe code there. You can adjust the iframe width and height properties. To embed an iframe using the Old (Classic) editor, click on the Embed Media icon and paste the code in the appropriate field.
After some research I found that you can't nest an iframe inside of an iframe in the same file. Instead what you need to do is add a reference to the child iframe as the src attribute for the parent iframe.
The div can be overlayed over iframe using z-index and absolute positioning. Iframe should have z-index lower than the div having class as overlay. Style the overlay div to the same height and width as the iframe, so that it does not affect the functionality of any other divs.
location. href and Other Link Targets in Java. Code in either HTML or JavaScript to target links so that they open either in new blank windows, in parent frames, in frames within the current page, or in a specific frame within a frameset.
When you create a document to be inside an iframe, any links in that frame will automatically open in that same frame. But with the attribute on the link (the element or elements), you can specify where the links will open. The first step is to give your iframe a unique name with the name attribute.
Add the name of the second iframe in the target attribute of every hyperlink. Click the links in the first iframe, and you should see the pages opening in the second iframe. Example: The HTML document will embed two iframes inside it.
How to navigate URL in an iframe with JavaScript ? How to navigate URL in an iframe with JavaScript ? To navigate URL in iframe with JavaScript, we have to set the src attribute or return the value of src attribute in an iframe element. The src attribute defines the URL of document that can be shown in an iframe.
HTML Iframe or inline frame allows embedment of multiple HTML pages in an HTML page. In this article, we will see how to change the content of one iframe using hyperlinks in another iframe. This can be achieved by the proper usage of the name attribute in the iframe tag and the target attribute in the anchor tag.
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.
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
