Манипулирование window.history влияет на favicon на IE11

Question

Вот сценарий: на сайте уже есть кэшированный фавикон (/favicon.ico файл) и я хочу это изменить. Этого легко достичь (добавив строку запроса к пути favicon: favicon.ico?v2). Но, любое изменение состояния (вызывая window.history.pushState() или же window.history.replaceState()) меняет значок на старый.

Похоже, IE11 принимает favicon.ico из каталога BASE, который, к сожалению, кешируется (favicon.ico?v2 рассматривается как другая сущность в кэше IE11).

Стоит отметить, что проблема не возникает при манипулировании location.hash, Так что меняем состояние с:

http://x.com

чтобы:

http://x.com/#id=5

не влияет на значок. Но меняем состояние на:

http://x.com/?id=5

переключает значок на старый (если он кешируется) или по умолчанию с IE11. Как только я обновлю браузер, появится новый значок.

Об этом уже сообщалось как об ошибке в IE11, но Microsoft решила оставить это. Я нашел два связанных вопроса: использование history.pushState в Firefox заставляет мой значок исчезнуть, а history.pushState в Chrome делает запрос значка, но ни один из них не дает решения моей проблемы.

Я также пытался обновить ссылку на значок избранного после изменения состояния (путем обновления link href атрибут) - это помогло на Edge, но не на IE11. браузер на самом деле отправляет новый запрос favicon, но он все еще показывает старый.

Я ищу способ сохранить значок после изменения состояния. Альтернативным решением может быть программное принудительное обновление IE11 favicon.ico файл (предположим, что Expires заголовок не был установлен).

Answer 1

Есть решение, но оно довольно хакерское.

Проблема в том, что IE кэширует значки по отдельности, и они будут загружены, только если вся страница есть. PushState просто проверяет существующий кеш и отображает только избранные страницы, которые были загружены ранее. Если pushState не использовался, вы можете изменить значок с помощью JavaScript, а потом не сможете.

Однако кеш фавиконов обновляется в реальном времени, поэтому вы можете сделать следующее:

• Установите скрытый iframe на своей странице.
• Перед вызовом pushState загрузите нужную страницу с дополнительным хешем (например, #onlyFavicon) в iframe (обязательно используйте замену, иначе ifarem повлияет на вашу историю).
• Пусть ваш сервер - или javaScript - проверит ваш хэш при загрузке страницы и предоставит пустую страницу с помощью только значка.
• После загрузки iframe ваш кеш избранного обновляется новым значком (добавьте в iframe список событий onLoad, чтобы знать, когда) Нет необходимости ждать, значок обновляется автоматически после загрузки iframe.
• Если вы позвоните pushState сейчас, значок будет отображаться правильно

Я знаю, что это глупо и поздно, но я надеюсь, что это поможет любому, кто также наткнется на эту проблему.