Подтвердить что ты не робот

Является ли API истории совместимым в современных браузерах?

API истории теперь поддерживается в каждом популярном браузере. Кажется, нет необходимости в хеш-резервах, трюках _escaped_fragment_ или других обходных решениях. Холодные библиотеки с 2013 года вроде History.js кажутся бесполезными сейчас. Но есть некоторые вещи, где я не уверен - например, обработка заголовка кажется сложной beacuse, по-видимому, аргумент title в pushState ничего не делает.

Мой вопрос: могу ли я на самом деле полагаться на API истории, чтобы вести себя последовательно в браузерах, или мне все еще нужен какой-то конкретный браузер? Это также означает: нужны ли мне тесты интеграции, запущенные в разных браузерах, чтобы проверить мой код? И если есть несоответствия, что это такое? (Обратите внимание, что меня интересуют только современные браузеры, поэтому нет IE < 11).

Возможно, кто-то, кто реализовал маршрутизацию для большого SPA, мог поделиться своим опытом?

4b9b3361

ОТВЕТЫ

Ответ 1

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

Есть еще некоторые отличия, как и в большинстве API-интерфейсов (вы не поверите, как непоследовательный classList находится между браузерами); вопрос в основном о том, насколько они серьезны.

pushState чаще всего используется в SPA, и они, похоже, игнорируют параметр объекта и в основном обрабатывают URL-адрес. Это означает, что ошибки, связанные с обработкой объектов состояния, могут быть менее "видимыми" для широкой публики.

Единственная проблема, с которой я недавно столкнулся, повлияла на то, что я делаю, - это то, что в IE и Edge (даже 14) history.state является getter, поэтому он получает новый экземпляр объекта при каждом доступе. Это означает, что вы не можете кэшировать объект состояния и сравнивать его с history.state, чтобы увидеть, была ли нажата новая. Вот отчет об ошибке: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/944050/

Также обратите внимание, что ни один браузер не поддерживает настройку заголовка через pushState, и никто никогда не будет, это слишком поздно. Если браузер начал поддерживать это, сайты pushState -using внезапно очистят все заголовки в истории браузера, потому что там код пропускает пустые строки. Вам просто нужно признать, что второй параметр бесполезен.

Ответ 2

На самом деле вы можете увидеть все поддерживаемые браузеры по истории lib: https://github.com/browserstate/history.js/#browsers-tested-and-working-in

И buglist, разрешенный этой lib, с той же страницы:

  • Браузеры HTML5
    • Chrome 8 иногда не содержит правильных данных состояния при переходе в исходное состояние
    • Safari 5, Safari iOS 4 и Firefox 3 и 4 не запускают событие onhashchange, когда страница загружается хешем
    • Safari 5 и Safari iOS 4 не запускают событие onpopstate, когда хэш изменился в отличие от других браузеров
    • Safari 5 и Safari iOS 4 не возвращаются в правильное состояние после замены хеша на replaceState вызов /отчет об ошибке
    • Safari 5 и Safari iOS 4 иногда не могут применять изменение состояния в условиях занятости /отчет об ошибке
    • Google Chrome 8,9,10 и Firefox 4 до RC всегда будут запускать onpopstate после загрузки страницы /изменить рекомендацию
    • В Safari iOS 4.0, 4.1, 4.2 есть рабочий API истории HTML5, хотя фактические обратные кнопки браузеров не работают, поэтому мы рассматриваем их как браузеры HTML4
    • Ни один из браузеров HTML5 фактически не использует аргумент title для вызовов pushState и replaceState
  • Браузеры HTML4
    • В старых браузерах, таких как MSIE 6,7 и Firefox 2, нет события onhashchange
    • MSIE 6 и 7 иногда не применяют хеш, даже если это было сказано (требуется второй вызов функции apply)
    • Браузеры, не поддерживающие Opera, иногда не применяют хеш, если хэш не urlencoded
  • Все браузеры
    • Данные и названия состояний не сохраняются после того, как сайт оставлен, а затем возвращен (включает обновление страницы)
    • Заголовки состояний никогда не применяются к document.title

Это может рассказать вам о существующих различиях.

Ответ 3

Были проблемы с API истории в Androids до 4 версии, но в целом он хорошо работает во всех основных браузерах.