$(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. Hi Matthew – I have tried your solution but I am not able to get it to work using FF7. Any ideas?

2. 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. 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. Ouah, thanks a lot for this, I’ve been searching a workaround for sometime !

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

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

   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. 1. It should be placed in the IFrame.
      2. It should be placed within tags.

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

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

   1. Inside of the iframe document.

   2. Okay. Thank you very much.

8. 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. Is this page public so I can take a look?
   Did you include jQuery on the page?

   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.

10. Which jquery library should be included for this to work?

    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.

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

    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?

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

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

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

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

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

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

19. Thank you so much. It worked like a charm. saved lot of my time.

Comments are closed.