Различные значки на каждой вкладке браузера в IE

У нас есть собственный механизм сеанса в нашем приложении, который позволяет пользователю иметь разные сеансы (например, разные учетные данные) на каждой вкладке браузера, , даже если URL-адреса являются одинаковыми. Этот механизм отлично работает во всех основных браузерах, включая IE (v11).

Проблема

Мы хотим предоставить каждой вкладке браузера разные значки (с другим цветом), чтобы указать, какая вкладка принадлежит к какой сессии. Для этого мы устанавливаем разные URL-адреса favicon в зависимости от сеанса, используя

<link rel='icon' href='url_to_favicon_session_id' type='image/ico'/>

Он отлично работает в Firefox и Chrome, однако IE, похоже, делится favicon между всеми вкладками, указывающими на один и тот же URL (значок одинаковый на каждой вкладке, порядок загрузки определяет видимость favicon на каждой вкладке).

Вопрос

Можем ли мы заставить IE каким-то образом не делиться favicons на вкладках браузера с теми же URL-адресами?

Примечание. Изменение URL-адреса здесь не является параметром.

Минимальный рабочий пример

Ниже полный фрагмент кода для воспроизведения проблемы (поставьте его на веб-сервере для запуска в IE с поддержкой HTML5; откройте этот файл на многих вкладках одного и того же браузера).

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <script type="text/javascript">

            var icons = [
                "http://google.com/images/google_favicon_128.png",
                "https://assets-cdn.github.com/favicon.ico",
                "https://www.microsoft.com/favicon.ico?v2",
                "https://s.yimg.com/rz/l/favicon.ico",
                "http://www.stackoverflow.com/favicon.ico",
            ];

            var idx = localStorage["favicon"];
            if (idx === undefined) {
                idx = 0;
            } else {
                idx = parseInt(idx);
            }

            localStorage["favicon"] = (idx + 1) % icons.length;

            var link = document.createElement('link');
            link.type = 'image/x-icon';
            link.rel = 'icon';
            link.href = icons[idx];
            document.getElementsByTagName('head')[0].appendChild(link);

        </script>
    </head>
    <body>
        Open this page in multiple tabs. Favicon should be different in each tab.
    </body>
</html>

Ответ 1

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

Вы можете попробовать переменную GET (т.е. yoursite.com/page?sessionid), однако, по моему опыту, IE по-прежнему кэширует favicon на одной странице в том же домене, независимо от переменной GET. Фактически документация Microsoft говорит, что вы можете использовать тег ссылки, чтобы разные страницы имели разные значки, однако я часто нахожу, что кеш favicon IE не будет обновляться, даже если вы измените тег ссылки, не очистив кеш. Кроме того, IE не будет отображать значки вообще, если вы отключили все кэширование. И, похоже, что в некоторых версиях IE тег link не имеет приоритета над любым значком в местоположении по умолчанию.

У меня был некоторый успех с использованием маршрутизации script для получения запросов на правильную страницу, а затем добавления sessionid как части пути (например, yoursite.com/page/sessionid). Это требует немного дополнительной работы в вашей маршрутизации script, чтобы игнорировать sessionid, но это единственное, что, по моему опыту, сработало с уверенностью, чтобы заставить IE распознавать разные значки для разных сеансов.