Making linking between anchors in an IFrame work in Firefox 4 and above

Update: For Firefox versions 11 and up see the update code.

In Firefox 4 a security fix was added which prevents linking between anchors within an IFrame that does not have scroll bars. This change breaks the scenario where you have an IFrame that has a “Go To Top” link (<a href=”top”>Go to top</a>) which links to an anchor tag (<a name=”#top” />) at the top of the IFrame.  If this IFrame does not have scroll bars then clicking the link will scroll the parent page to bring the anchor into view. This can be a security issue which is why Firefox is the first browser to block it.  However, I believe they should have added an exception for the case when the IFrame and the containing page satisfy the Same Origin Policy.

I worked around this limitation by adding the following code to my IFrame (my implementation uses jQuery) which will override the anchor link functionality and scroll the window programmatically. This code makes use of the window.parent property which means it is subject to the Same Origin Policy.

$(function(){
  $("a").each(function (){
    var link = $(this);
    var href = link.attr("href");
    if(href && href[0] == "#")
    {
      var name = href.substring(1);
      $(this).click(function() {
        var nameElement = $("[name='"+name+"']");
        var idElement = $("#"+name);
        var element = null;
        if(nameElement.length > 0) {
          element = nameElement;
        } else if(idElement.length > 0) {
          element = idElement;
        }

        if(element) {
          var offset = element.offset();
          window.parent.scrollTo(offset.left, offset.top);
        }

        return false;
      });
    }
  });
});

 

This entry was posted in JavaScript. Bookmark the permalink.

29 Responses to Making linking between anchors in an IFrame work in Firefox 4 and above

  1. Paul says:

    Hi Matthew – I have tried your solution but I am not able to get it to work using FF7. Any ideas?

  2. Matthew says:

    Hi Paul,

    I just tested and it does work in FF7. You can see the code in action at http://code.msdn.microsoft.com/LINQ-to-DataSets-09787825.
    On that page if you click “Select – Filtered” it will scroll the page using the code from this post.

    Take a look at that page and see if that helps.

    -Matt

  3. Tae-Jin says:

    Hello Matthew,

    I wanted to leave a comment and say thank you for your piece of code. I can vaguely understand why they decided that this is a security flaw and stop this behavior in Firefox, but it make pages that have to have a a lot of text unusable. You have saved me a lot of headache and allow the students at our school continue to use whatever browser they choose. Thank you!

  4. Trangsene says:

    Ouah, thanks a lot for this, I’ve been searching a workaround for sometime !

  5. Jason says:

    Where exactly do you place you code in order to make it work?

  6. Matthew says:

    You can really place this code anywhere in your page (head or body) since it hooks into the onDocumentComplete event.

  7. Jason says:

    Do you mean the iframe document or the iframe tags themselves?

  8. Jason says:

    It isn’t working for me. I don’t have to alter the code at all, do I? I put it in the head section of my iframe document, as is, between two “” tags.

  9. Matthew says:

    Is this page public so I can take a look?
    Did you include jQuery on the page?

    • Jason says:

      No. I haven’t published it yet. I copied your code and place it between script tags in the head section. I first specified the type as “text/javascript,” but that didn’t work. Then I removed the type attribute from the opening script tag, but it still didn’t work. Perhaps I should place the code elsewhere.

  10. sam says:

    Which jquery library should be included for this to work?

  11. Simon says:

    Hi Matthew – this works a treat for Firefox. Not such luck with Chrome I’m afraid. Any ideas?

    • Matthew says:

      At least at the time when I wrote this, Chrome didn’t have this bug. It allowed linking between anchors in an iframe with no scroll bars making this code not needed. Have you noticed otherwise?

  12. RonQi says:

    Thanks for your article.
    I tested on msdn, there are differences between FF3 and FF11. When click “Select – Simple 2″, the FF3 scrolls page to “Select – Simple 2″, but the FF11 scrolls page to “This sample uses select to…”.

    • Matthew says:

      It does seem that the behavior changed in FF in some recent version. When I first wrote this code in FF4 element.offset(); would get the offset from the top of the page, however in more recent versions of FireFox it gives the offset from the top of the iframe. To fix this for later version you would need to add the offset value with the offset of the iframe from the top of the parent page. I will look into updated this code sometimes this week to reflect this change.

    • Matthew says:

      I fixed the issue. Check out my new post which shows the update code to fix the issue for Firefox 11 and up.

  13. Dan says:

    Hi Matthew,

    I’m having the same problem with later versions (v11) onwards of FF and was wondering if you had managed to fix it?

    Thanks

    Dan

  14. Pingback: JavaScript - Making linking between anchors in an IFrame work in Firefox 11 and above - Matthew Manela - Farblondzshet in Code

  15. jeff says:

    Looks like this security hole was just fixed in IE8. Any computer I have that has KB2699988 has this same problem.
    Do you know if this code will work in IE also? It seems that it should, but it wouldn’t be the first time I thought something would work in IE and it didn’t.

  16. Thomas Reinberger says:

    Pleas note that href[0] won’t work in IE. Replace it with href.charAt(0) and you’ll be fine using IE.

  17. Hmm it appears like your website ate my first comment (it was super long) so I guess I’ll just
    sum it up what I submitted and say, I’m thoroughly enjoying your blog.
    I as well am an aspiring blog writer but I’m still new to
    everything. Do you have any helpful hints for first-time blog writers?
    I’d certainly appreciate it.

    My page; outlet Tracksuit kids

  18. Zdenek says:

    Hello Matthew,

    thank you so much for this code. I spent hours of searching for something that could work and this code is really the first working one. Thanks a lot again ;)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>