Window.history.pushState обновление браузера

Я работаю над некоторым кодом javascript и используя window.History.pushState для загрузки новых страниц HTML вместо использования тегов href. Мой код (который работает нормально) выглядит следующим образом.

window.History.pushState({urlPath:'/page1'},"",'/page1')

странно, этот не работает, то есть перезагружает браузер

window.History.pushState({urlPath:'/page2.php'},"",'/page2.php')

Но это работает, контент обновляется, браузер не обновляется! (обратите внимание, что URL-адрес является абсолютным и не относительным)

window.History.pushState({urlPath:'www.domain.com/page2.php'},"",'www.domain.com/page2.php')

В документации для window.History.pushState указано, что третий URL-адрес параметра может быть абсолютным или относительным -

URL. Новый URL-адрес записи истории задается этим параметром. Заметка что браузер не будет пытаться загрузить этот URL-адрес после вызова pushState(), но может попытаться загрузить URL позже, например после перезапуска пользователя. Новый URL не обязательно должен быть абсолютный; если он относительный, он разрешен относительно текущего URL-адреса. Новый URL-адрес должен иметь тот же источник, что и текущий URL; в противном случае, pushState() выдает исключение. Этот параметр является необязательным; если он не указан, он устанавливает текущий URL-адрес документа.

Абсолютные URL-адреса, похоже, работают, но относительный, похоже, не так. Почему это происходит?

Ответ 1

Короткий ответ: history.pushState (не history.pushState, который генерирует исключение, часть window не является обязательной) никогда не будет делать то, что вы предлагаете.

Если страницы обновляются, то это вызвано другими вещами, которые вы выполняете (например, вы можете запустить код, который переходит в новое место в случае изменения адресной строки).

history.pushState({urlPath:'/page2.php'},"",'/page2.php') работает точно так же, как предполагается в последних версиях Chrome, IE и Firefox для меня и моих коллег.

Фактически вы можете поместить все, что вам нравится, в функцию: history.pushState({}, '', 'So long and thanks for all the fish.not a real file').

Если вы разместите еще один код (с особым вниманием к коду, расположенному рядом с history.pushState и где-нибудь document.location), то мы будем более чем рады помочь вам выяснить, откуда именно эта проблема.

Если вы разместите больше кода, я обновлю этот ответ (у меня есть ваш вопрос, который вы любите):).

Ответ 2

Как и другие, вы не ясно объясняете свою проблему, то, что вы пытаетесь сделать, или каковы ваши ожидания относительно того, что должна делать эта функция.

Если я правильно понял, то вы ожидаете, что эта функция обновит страницу для вас (вы фактически используете термин "перезагружает браузер" ).

Но эта функция не предназначена для перезагрузки браузера.

Вся функция делает это, чтобы добавить (push) новое "состояние" в историю браузера, чтобы в будущем пользователь смог вернуться к этому состоянию, в котором находится веб-страница.

Обычно это используется в сочетании с вызовами AJAX (которые обновляют только часть страницы).

Например, если пользователь выполняет поиск "CATS" в одном из ваших полей поиска, а результаты поиска (предположительно симпатичные изображения кошек) загружаются обратно через AJAX в нижнем правом углу страницы - - тогда ваше состояние страницы не будет изменено. Другими словами, в ближайшем будущем, когда пользователь решает, что он хочет вернуться к поиску "CATS", он не сможет этого сделать, потому что государство не существует в его истории. Он сможет только щелкнуть обратно в ваш пустой поле поиска.

Следовательно, потребность в функции

history.pushState({},"Results for `Cats`",'url.html?s=cats');

Он предназначен для того, чтобы позволить программисту точно определить его поиск в тропе истории пользователя. Это все, что нужно сделать.

Когда функция работает правильно, единственное, что вы должны ожидать увидеть, - это адрес в адресной строке вашего браузера, который вы указываете в своем URL-адресе.

Если вы уже это понимаете, то извините за эту длинную преамбулу. Но это звучит так, как вы задаете вопрос, чего у вас нет.

В стороне, я также нашел некоторые противоречия между тем, как функция описана в документации, и тем, как она работает в реальности. Я считаю, что неплохо использовать пустые или пустые значения в качестве параметров.

См. мой ответ на этот вопрос SO. Поэтому я бы рекомендовал разместить описание во втором параметре. Из памяти это описание, которое пользователь видит в раскрывающемся списке, когда он нажимает и удерживает кнопку мыши над кнопкой "назад".

Ответ 3

window.history.pushState({urlPath:'/page1'},"",'/page1')

Работает только после загрузки страницы, и когда вы нажмете на обновление, это не означает, что есть реальный URL.

Что вы должны здесь делать, это знать, к какому URL-адресу вы перенаправляетесь при перезагрузке этой страницы. И на этой странице вы можете получить условия, получив текущий URL-адрес и сделав все ваши условия.