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

 

 
  • http://herbalgroups.com Paul

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

  • https://www.google.com/accounts/o8/id?id=AItOawlrLeowWytSCscAcNv3ky4tdtP7AcgDAC8 Matthew

    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

  • Tae-Jin

    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!

  • Trangsene

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

  • Jason

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

  • https://www.google.com/accounts/o8/id?id=AItOawlrLeowWytSCscAcNv3ky4tdtP7AcgDAC8 Matthew

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

    • Jason

      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?

      • https://www.google.com/accounts/o8/id?id=AItOawlrLeowWytSCscAcNv3ky4tdtP7AcgDAC8 Matthew

        1. It should be placed in the IFrame.
        2. It should be placed within tags.

      • Jason

        Correction: That was intended to be script tags. Since I used brackets, I guess it was parsed out.

  • Jason

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

    • https://www.google.com/accounts/o8/id?id=AItOawlrLeowWytSCscAcNv3ky4tdtP7AcgDAC8 Matthew

      Inside of the iframe document.

      • Jason

        Okay. Thank you very much.

  • Jason

    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.

  • https://www.google.com/accounts/o8/id?id=AItOawlrLeowWytSCscAcNv3ky4tdtP7AcgDAC8 Matthew

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

    • Jason

      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.

  • sam

    Which jquery library should be included for this to work?

    • https://www.google.com/accounts/o8/id?id=AItOawlrLeowWytSCscAcNv3ky4tdtP7AcgDAC8 Matthew

      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.

  • http://www.elysiumwebdesign.com.au Simon

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

    • https://www.google.com/accounts/o8/id?id=AItOawlrLeowWytSCscAcNv3ky4tdtP7AcgDAC8 Matthew

      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?

  • RonQi

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

    • https://www.google.com/accounts/o8/id?id=AItOawlrLeowWytSCscAcNv3ky4tdtP7AcgDAC8 Matthew

      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.

    • https://www.google.com/accounts/o8/id?id=AItOawlrLeowWytSCscAcNv3ky4tdtP7AcgDAC8 Matthew

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

  • http://writeitright.clients.wiredesign.com Dan

    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

    • https://www.google.com/accounts/o8/id?id=AItOawlrLeowWytSCscAcNv3ky4tdtP7AcgDAC8 Matthew

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

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

  • jeff

    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.

  • Thomas Reinberger

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

  • http://www.polmaily.com/tresfaible-timberland-chaussures-chukka-homme-16-promo.html outlet Tracksuit kids

    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

  • Zdenek

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