Можно ли изменить URL при прокрутке вниз на одну страницу?

Question

Можно ли изменить URL при прокрутке вниз одной страницы с помощью AJAX? У меня есть веб-сайт на одной странице, и я хочу иметь этот эффект.

пример:

www.blablabla.com/blog

пользователь прокручивает вниз ...

www.blablabla.com/blog/entry-name

Я знаю о хешировании ... могу ли я замаскировать URL?

Answer 1

Я знаю, что это немного более старый вопрос, но браузеры изменились, и сейчас можно делать то, что просил автор. Это означает, что большинство других ответов больше не действительны. Я выкладываю способ сделать это так, чтобы он мог помочь людям, использующим Google, найти правильный ответ.

Короче говоря, в современных браузерах (браузерах с поддержкой HTML 5) вы можете. Пожалуйста, ознакомьтесь с этой статьей.

Это сводится к следующей строке кода:

window.history.pushState("object or string", "Title", "/new-url");

Выполнение вышеуказанного кода изменит URL-адрес на example.com/new-url и поможет вам выполнить то, что вы хотели.

Для демонстрации вы можете взглянуть на Webby Awards , где используется этот метод. Просто прокрутите вверх или вниз и посмотрите на голый адрес. Эффект довольно впечатляющий.

Answer 2

Вы можете использовать pushState (), чтобы изменить URL, отображаемый в строке URL браузера, без перезагрузки или использования хеша.Пока ваш браузер поддерживает HTML5, то есть.

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Answer 3

Нет.Не знаю, зачем вам это нужно.

Как вы упомянули, единственный способ - добавить его в хэш страницы, например

http://www.website.com/blog/#entry-name

Затем перейти к этой частистраницы, что-то вроде:

if (window.location.indexOf("#") > 0) {
    var entry_id = window.location.substring(window.location.indexOf("#"));
    $('html, body').animate({
        scrollTop: $(entry_id).offset().top
    }, 2000);
}

РЕДАКТИРОВАТЬ: Это давно возможно с window.history.pushState.

Answer 4

возможно с помощью метода window.pushState.

Answer 5

как насчет https://github.com/browserstate/history.js/ history.js

Включая постоянную поддержку данных, заголовков, replaceState. Поддерживает jQuery, MooTools и Prototype. Для браузеров HTML5 это означает, что вы можете изменить URL-адрес напрямую, без необходимости больше использовать хэши.

Answer 6

Да, вы можете, но это немного сложно.

Если у вас есть это на странице index.html:

  <a id="link-to-later" href="#later">Go to later</a>
  <p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p> 
  <a id="later" name="later">Some later anchor</a>

Затем, нажав верхнюю ссылку, вы перейдете кпривязка внизу без перезагрузки страницы и URL будет index.html#later.

Используя событие window.onscroll, вы можете привязать событие к пользователю, прокручивающему страницу вниз.Обработчик событий может включать что-то вроде $('#link-to-later').click(), что отправит браузер пользователя указывать на страницу с привязкой later.

Вам нужно будет поработать, чтобы это не было слишком изменчивым, но это выполнимо.

Answer 7

Нет, по соображениям безопасности вы не можете изменять URL-адрес с помощью JavaScript