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;
      });
    }
  });
});

 

 

30 thoughts on “Making linking between anchors in an IFrame work in Firefox 4 and above

  1. 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!

    1. Okay. Well, I have 2 additional questions then: 1) Should it be placed in the parent document or the iframe document?, and 2) Is it required to go into a set of tags?

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

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

    1. Any recent version of jQuery should work. I think I had tested it with 1.5 but I don’t see why most other versions wouldn’t work.

    1. 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?

  3. 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…”.

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

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

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

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

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

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

Comments are closed.