How to avoid anchors in iframes to scroll parent page

Question

So, here\'s the problem: I have a quite long page with an iframe in the middle. Now, if an anchor is clicked in the iframe, the entire page is scrolled to the iframe, which is w

Answer 1

Trying various combinations of setting the frame's location or hash still unfortunately resulted in the parent scrolling.

So this is what I ended up doing since the iframe's content was on the same domain so there wasn't a cross-site issue navigating the frame DOM.

I modified the links in the parent so instead of doing target="myiframe", I added an o'clock function to do the scrolling bypassing the default implementation (which seems to cause the parent to jump to the iframe).

The link function looks like this:

/// for scrolling iframe without jumping parent page
function linkFunction(atag, event) {
    event.preventDefault();
    var iframe = document.getElementById('myiframe');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    var name = atag.href.split('#')[1]; // get the hash
    var anchor = innerDoc.getElementsByName(name)[0]; // find the corresponding anchor tag
    // get position of the anchor relative to the current scroll position
    var offset = anchor.getBoundingClientRect().top
    // jump scroll the iframe content to the anchor
    iframe.contentWindow.scrollBy(0, offset)
}

No JQuery and still works properly if javascript disabled (just reverts to the default parent jumping).

Hope this helps someone else.