#javascript #firefox #scroll #anchor
#javascript #firefox #прокрутите #привязка
Вопрос:
На веб-сайте www.example.org У меня есть якорь #anchor. Мне приходится работать с якорями, потому что этот веб-сайт написан на GWT и встроен в iframe (и оба сайта имеют разные домены).
К счастью, я нашел решение для прокрутки до привязки, которое работает в Chrome, Safari, IE7, IE8, IE9, но, оказывается, оно не работает в Firefox.
В моем коде я проверил, является ли браузер одним из IE. Если да, то я делаю это:
window.location = www.example.org#anchor
и это работает отлично.
Если браузер не является одним из этих IE, я делаю это:
window.location.href = '#anchor';
и это отлично работает в Chrome и Safari.
Однако ни одно из обоих решений не работает с Firefox (6). У кого-нибудь есть идея, как я могу прокрутить в FireFox до привязки?
PS scrollIntoView, scrollTo(0,0) и получение элемента для прокрутки до этого элемента в этом случае не работает… После нескольких дней попыток я понял, что работают только якоря.
Комментарии:
1. Вы пробовали
document.location.hrefв FireFox?2. Да, прямо сейчас. Тот же результат : (
Ответ №1:
Я знаю, что это было некоторое время назад, но я только что столкнулся с той же проблемой и нашел ужасное, но эффективное решение. Проблема: Firefox не отвечает на местоположение.хэш в некоторых фреймах. Простой пример, опубликованный выше в jsfiddle, работает, но более сложные примеры (в моем случае в приложении Facebook) — нет. Решение: создайте визуально скрытый элемент ввода в том месте, где вы хотите привязать.
<input id="top_anchor" type="text" style="position:relative; z-index:-1; float:left">
CSS предназначен для того, чтобы заставить браузер думать, что ввод виден, но на самом деле сделать элемент невидимым для пользователя, измените его так, как вы считаете нужным для вашего собственного случая. Z-index отобразит его ниже своего родительского элемента (возможно, вам придется возиться с родительским элементом, чтобы заставить его полностью работать), а примененный к нему float поможет свернуть входные данные в родительском элементе. Важно, чтобы мы не использовали «display: none» или «visibility: hidden», потому что браузер будет считать этот элемент визуально скрытым, и следующая часть не будет работать.
Следующая часть: в вашем javascript вместо изменения хэша или местоположения мы находим гораздо более хитрый способ заставить браузер перейти к определенной точке страницы:
document.getElementById('top_anchor').focus();
Я только что протестировал это в Firefox 8, и это отлично работает. Немного грустно, что такой неискренний взлом сработает, а исходный код с благими намерениями — нет; но я полностью понимаю мыслительный процесс, заключающийся в том, что определенное поведение ДОЛЖНО быть вызвано действиями пользователя.
Комментарии:
1. звучит интересно. Я должен это протестировать. Спасибо, что поделились решением.
2. 1 за очень хороший взлом, но он выводит нижнюю часть страницы. как вывести верхнюю часть раздела id.
Ответ №2:
Попробуйте это:
setTimeout(window.location.hash = "anchor",500)
Ответ №3:
Имеет ли элемент, который вы прокручиваете вниз, свойство ID и используется ли идентификатор только один раз?
Комментарии:
1. <a name=»anchor» id =»anchor» > </a> и есть только один из них
2. Я бы попробовал назвать это чем-то другим, кроме привязки. Это может быть какое-то зарезервированное слово. У меня никогда не было этой проблемы с FF, о которой вы упоминаете.
3. подождите, эта страница, над которой вы работаете, находится в iframe другой страницы?
4. да. и нет другого способа сделать это. мы должны использовать iframe :(. (и привязка не находится в родительском окне)
5. Это похоже на проблему iframe, а не на окно. Расположение. хэш-вопрос. Дайте вашему iframe значение id и name, скажем, «bob». Затем выполните window.bob.src = » myurl.com#here «.
Ответ №4:
Использовать:
window.location.hash = "anchor"
Это должно сработать в каждом браузере. Вот живой пример, который работает в Firefox. Кроме того, привязка a должна быть видна, когда установлен хэш, иначе FF7 не перейдет к привязке. Вот пример, который не будет работать в FF7, демонстрирует, что вам не разрешено делать.
Комментарии:
1. не работает в FF. (И я почти уверен, что я тоже пробовал это для браузера IE8, но единственное решение, которое я нашел, было именно тем, что я опубликовал выше)
2. Это работает. Вероятно, у вас есть другая проблема / ошибка. Покажите код, как вы его пробовали.
3. Ну, это работает в Chrome и Safari, но не в FF. Я не могу показать много кода, который помогает. У меня есть только функция, которая делает это: $wnd.location. hash = «якорь»; это функция JSNI в GWT, и в документе у меня есть якорь, подобный этому <имя =»якорь»></a>
4. Я не могу сказать вам, почему у вас не получается, пока вы не разместите живой пример в Интернете. Но Firefox поддерживает его. Взгляните сами на документацию: developer.mozilla.org/en/window . расположение Здесь вы видите это окно. location имеет свойство .hash и делает то, что он должен делать.
5. кажется, это работает в FF v3: D. Я использую FF7 прямо сейчас, и, к сожалению, там он тоже не работает
Ответ №5:
Большое спасибо, что указали на окно.Расположение.хэш вместо окна.location.href.
С помощью window.Расположение.хэш Я смог перезагрузить страницу с привязкой!
<a href="javascript:window.location.hash = '#anchor';
window.location.reload(true);">Link text...</a>