javascript - window.location.href in iframe does not work in FireFox - Stack Overflow

admin管理员组

文章数量:1414614

On the website www.example I have an anchor #anchor. I have to work with anchors because that website is written in GWT and it's embedded in an iframe (and both sites have different domains).

Luckily I found a solution to scroll to the anchor which works in Chrome, Safari, IE7, IE8, IE9 but it turns out it does not work in Firefox.

In my code I checked if the browser is one of the IE's. If yes then I do this:

window.location = www.example#anchor

and that works perfectly.

If the browser is not one of those IE's then I do this:

window.location.href = '#anchor';

and this works perfectly in Chrome and Safari.

However none of both solutions works with Firefox (6). Does anyone have an idea how I can scroll in FireFox to the anchor?

P.S. scrollIntoView, scrollTo(0,0) and get an element to scroll to that element does not work in this case... After days of trying I figured that only anchors work.

On the website www.example I have an anchor #anchor. I have to work with anchors because that website is written in GWT and it's embedded in an iframe (and both sites have different domains).

Luckily I found a solution to scroll to the anchor which works in Chrome, Safari, IE7, IE8, IE9 but it turns out it does not work in Firefox.

In my code I checked if the browser is one of the IE's. If yes then I do this:

window.location = www.example#anchor

and that works perfectly.

If the browser is not one of those IE's then I do this:

window.location.href = '#anchor';

and this works perfectly in Chrome and Safari.

However none of both solutions works with Firefox (6). Does anyone have an idea how I can scroll in FireFox to the anchor?

P.S. scrollIntoView, scrollTo(0,0) and get an element to scroll to that element does not work in this case... After days of trying I figured that only anchors work.

• javascript
• firefox
• scroll
• anchor

Share Improve this question Follow edited Jun 10, 2012 at 15:59 TazGPL 3,74622 gold badges4141 silver badges6060 bronze badges asked Oct 13, 2011 at 20:36 mknmkn 13.2k1717 gold badges5252 silver badges6565 bronze badges 2

• Have you tried document.location.href in FireFox? – Biotox Commented Oct 13, 2011 at 20:42
• Yes right now. Same result :( – mkn Commented Oct 13, 2011 at 21:05

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

I know this was awhile back but I have just encountered the same issue and disinterred a terrible but effective solution. The problem: Firefox does not respond to location.hash in some iframes. The simple example posted above in jsfiddle does work but more plex examples (in my own case in a Facebook app) do not. The solution: create a visually hidden INPUT element in the location where you want the anchor.

<input id="top_anchor" type="text" style="position:relative; z-index:-1; float:left">

The CSS is intended to trick the browser into thinking the input is visible but to actually make the element invisible to the user, modify as you see fit for your own case. The z-index will render it below its parent element (you might need to mess with the parent element to get this to fully work) and the float applied to it will help for the input to collapse in its parent. It is important that we not use "display:none" or "visibility:hidden" because the browser will consider that element to be visually hidden and the next part won't work.

The next part: in your javascript, rather than changing the hash or location, we find a much more devious way to get the browser to jump to a certain point in the page:

document.getElementById('top_anchor').focus();

I just tested this in Firefox 8 and it works great. It's kind of sad that such a disingenuous hack will work but the original, well-intentioned code will not; but I pletely understand the thought process that certain behaviors NEED to be triggered by user actions.

Try this:

setTimeout(window.location.hash = "anchor",500)

Does the element you're scrolling down to have an ID property and is the ID only used once?

Use:

window.location.hash = "anchor"

That should do the trick in every browser. Here a live example which is working in Firefox. Furthermore the a-anchor has to be visible when the hash is set otherwise FF7 won't jump to the anchor. Here's an example what won't work in FF7 do demonstrate what you are not allowed to do.

Thanks so much for pointing out the window.location.hash instead of window.location.href.

With window.location.hash I was able to reload the page with the anchor!

<a href="javascript:window.location.hash = '#anchor';
window.location.reload(true);">Link text...</a>

本文标签： javascriptwindowlocationhref in iframe does not work in FireFoxStack Overflow