Question

我们的应用程序中有一个自定义会话机制，允许用户在每个浏览器选项卡中使用不同的会话（例如，不同的凭据），即使URL相同。这种机制适用于所有主流浏览器，包括IE（v11）。

问题

我们希望为每个浏览器选项卡提供不同的favicon（具有不同的颜色），以指示哪个选项卡属于哪个会话。为此，我们根据会话使用

设置不同的favicon URL

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

它在Firefox和Chrome中运行良好，但IE似乎在指向同一URL的所有选项卡之间共享图标（每个标签中的图标相同，加载顺序确定每个标签中可见的图标）。

问题

我们可以强制IE以某种方式不使用相同的URL分享浏览器标签中的favicon吗？

注意，此处不能更改URL。

最小工作示例

以下完整代码片段重现问题（将其放在网络服务器上以在支持HTML5的IE中运行;在同一浏览器的许多选项卡中打开此文件）。

<!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>

Answer 1

根据我的经验，IE和几乎所有其他浏览器一起使用与页面缓存分开的缓存机制，以防止不断检索favicon。这意味着除非更改URL并清除域的缓存，否则对favicon的更改可能是不可预测的。我能看到的唯一可靠的方法是添加一个唯一的ID来标识每个会话的选项卡，迫使IE分别缓存每个会话的图标。

您可以尝试一个GET变量（即yoursite.com/page?sessionid），但是，根据我的经验，IE仍然缓存在同一域中的页面上的图标，而不管GET变量。事实上，Microsoft's documentation表示您可以使用链接标记来获取不同的网页，但是，我经常发现，即使您更改链接标记而不清除缓存，IE的图标缓存也不会更新。此外，如果您关闭了所有缓存，IE将根本不显示图标。而且，似乎在IE的某些版本中，链接标记不会优先于默认位置的任何图标。

我使用路由脚本获取请求到正确的页面，然后将sessionid作为路径的一部分附加（即yoursite.com/page/sessionid），我取得了一些成功。这需要在您的路由脚本中进行一些额外的工作来忽略sessionid，但根据我的经验，这是唯一可靠的方法，可以让IE在不同的会话中识别不同的图标。

IE中每个浏览器选项卡中的不同图标

1 个答案: