How to avoid anchors in iframes to scroll parent p

问题:

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 what I want to avoid.

Here's an example: http://jsfiddle.net/ymbV7/1/ Don't scroll down the page, but scroll the iframe until you can see the "Contents" menu, and try any of the links (for example "Features").

I need the external page not to scroll, while the iframe has to correctly scroll to the clicked anchor.

Any ideas?

回答1:

So you are telling that you want to move to a particular paragraph when clicked on the link which describes the link detail right?

According to what I understand you can do like this.

<a href="#exactline">Click here</a>

Instead of Click here you can write Features, as of what I saw in http://jsfiddle.net/ymbV7/1/

now to link to the place where it should move all you need to do is this:

<h2><a name="exactline">Linking Directly from Features</a></h2>
<p>To override this behaviour, certain standard techniques can be used. In particular, you will need to create named anchors in the body of the text at the point where you want to link to.
</p>

"exactline" is the link name given to the para or heading you what to refer.

It scrolls only the iframe and not the whole Page..

refer this link for more clearance

http://www.thesitewizard.com/html-tutorial/link-to-specific-line-or-paragraph.shtml

I tried and it worked for me

回答2:

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).

<a onclick="linkFunction(this, event);return false;"...

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.

回答3:

Try to put your content into a table like this:

<table cellpadding=0 cellspacing=0 height="100%" width="100%">
  <tr>
    <td> 
      Header
    </td>
  </tr>

  <tr>
    <td>
      <iframe src="http://en.wikipedia.org/wiki/jQuery" height=600 width="90%"></iframe>
    </td>
  </tr>
  <tr>
    <td> 
      Footer
    </td>
  </tr>
</table>

Refer to http://www.webdeveloper.com/forum/showthread.php?t=212032

回答4:

I think if you did <a target="name of iframe" href="#name of anchor">Click here</a> it would work because then the link is opening in the iframe and this is possibly why the anchor was making the whole page scroll to the iframe. Hope I helped and hope it works! :)

回答5:

Maybe it's a bug in chrome, because this issue not happen in the latest IE and Firefox.

It happended when clicked anchor in iframe, and browser try to align the anchor to the top of the window.

I solved this issue use JavaScript（jQuery）：

$('body').on('click', 'a', function(e) {
    if($(this).attr('href').startsWith('#')) {
        e.preventDefault();
    }
});

I hope it can help you & good luck!

回答6:

Yes, you have to watch the links and do it using JQuery.

$(document).on('click', 'A[href^="#"]', function(){
    var hash = $(this).attr('href');
    var o = $(hash);
    if (o.length) {
        // move it
        $("html,body").stop().animate({ scrollTop: o.offset().top }, 300, 'swing');
        if (window.frameElement) {
            // it has parent window => stop bubbling (will not change document location)
            return false;
        }
    }
});