Geek Answers Handbook

Anchor links inside an iframe do nothing

Is it possible to have a scrollable iFrame inside a scrollable div and is it right to bind links inside an iFrame? Anchor links inside an iFrame should scroll to a place inside the iFrame, I don't need / need them to point to elements on the parent page.

Here is my jsFiddle with a simple example:

http://jsfiddle.net/shopguy/WjmHG/

and the code for it:

<div style="width: 100%; height: 300px; overflow: auto;"> <iframe style="width: 100%; height: 2000px;" src="http://www.hypergurl.com/anchors.html" scrolling="no"></iframe> </div>

I have no connection with this hypergurl.com link used in my example, it was only the first example that I could find on a page with a link to the id / name syntax link in it.

If you download JSFiddle and click on the "Go to the bottom" link inside the iFrame, it does nothing (testing with FireFox 19.0.2). When testing on different pages, it never works in FireFox, in Chrome it sometimes works the first time you click, but then if you scroll up and click again, it doesn’t work. In IE8, it works (scrolls) most of the time.

Scrolling works correctly all the time, if I myself allow the iFrame to have a scroll bar (delete scroll = "no"). This is not a practical solution for me, though, since I have content outside the framework that I want to scroll along with it. In my real code, I dynamically set the height of the iFrame to fill its content, so it looks more like the content on my page.

Additional information on why I need this:

I am creating an email web client, and so far, there seems to be the least amount of problems if I display the body of HTML email messages inside an iframe, and also try to display inside a table cell or div inside my page, I would like These types of links worked. I have some control over the content, it comes from my server, and I can modify it a bit (but I do not want to hack it too much). For example, I already change all the links to open in a new window (but not the links starting with C #, so this is not my problem).

I know that GMail does not use iFrames, but my XFINITY email client (based on Comcast) works, and they managed to get them to work (but have not yet figured out what they are doing).

+4
source share
2 answers

Send message: Link to transition in iFrame

If your iframe has a different domain, then you cannot use the javascript solution to solve this problem, but if so, you can add the target = "_ parent" attribute to all the anchors inside the iframe.

 var iframe = document.getElementById('iframeId'); var doc = (iframe.contentDocument)? iframe.contentDocument: iframe.contentWindow.document; var anchors = doc.getElementsByTagName('a'); for (var i = 0; i < anchors.length; i++) anchors[i].target = '_parent';
+2
source

I recently added code to this library to figure out the whole issue with Anchor Links inside iFrame.

https://github.com/davidjbradshaw/iframe-resizer

It intercepts all requests for page navigation and scrolls the parent page to the correct position. If he does not find the anchor in the iFrame, he bubbles onto the parent page and looks for it there.

0
source

More articles:


All Articles