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

【问题标题】：Different favicon in each browser tab in IEIE中每个浏览器选项卡中的不同图标
【发布时间】：2014-12-11 16:24:17
【问题描述】：

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

问题

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

根据会话设置不同的网站图标 URL

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

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

问题

我们能否以某种方式强制 IE 不在具有相同 URL 的浏览器选项卡之间共享网站图标？

请注意，此处不能更改 URL。

最小的工作示例

下面的完整代码 sn-p 重现问题（将其放在网络服务器上以在支持 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>

【问题讨论】：

在示例中，favicon 标签是通过 JavaScript 生成的。实际应用中也是这样吗？如果是这样，我可以想象 IE 会从其缓存（基于 url）加载 favicon，并且在 JavaScript 启动时不会重新加载它。在这种情况下，您可能会尝试在初始页面内容中将其呈现在服务器端。
不，在实际应用程序中，favicon 嵌入在 HTML 代码中。然而，对于 IE 而言，如何将 favicon 包含在页面中并不重要，重要的是 页面的 URL 是什么。此外，这不是缓存问题，因为（1）如果您加载我在两个不同 URL 中提供的代码，它会按预期工作，（2）即使 HTML 被缓存，脚本也会加载不同的 favicon URL，所以 favicon 文件缓存不是在这里相关。
解决方法可能是为每个会话的页面 URL 附加一个虚拟的唯一参数（例如 yoursite.com/page?id=<unique id>）。这将强制 IE11 在每个选项卡上加载不同的图标。

标签： javascript internet-explorer web favicon

【解决方案1】：

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

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

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

【讨论】：

在 URL 和路由脚本中使用 session id 的方式实际上是我们的 session 机制的工作方式。然而，用户可见的页面的 URL（在地址栏中）是使用历史 API 欺骗的。我们不希望用户看到会话 ID 或将其复制到某处（注意：在我们的案例中，这并不是真正的安全问题，而是可用性问题）。问这个问题时，我实际上希望某个 IE 内部人员会向我们透露一些影响显示网站图标的 URL 以外的其他因素，或者确保我们不存在这样的因素。
我明白了。我已经做了尽可能多的研究来尝试找到其他因素，但它似乎是一个非常激进的基于 url 的缓存。有点奇怪的是，IE 如此担心不会在每个请求上传输 favicon，以至于他们为它们进行了如此激进的缓存，但仍继续在 Accept 标头和其他地方发送数百个不必要的字节。