tom*_*ash 12 javascript favicon internet-explorer web
我们的应用程序中有一个自定义会话机制,允许用户在每个浏览器选项卡中拥有不同的会话(例如,不同的凭据),即使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>
根据我的经验，IE 以及几乎所有其他浏览器都使用与页面缓存分开的缓存机制，以防止不断检索网站图标。这意味着除非更改 url 并清除域的缓存，否则对网站图标的更改可能是不可预测的。我能看到的唯一可靠的方法是添加一个唯一的 id 来标识每个会话的选项卡，迫使 IE 单独缓存每个会话的图标。
您可以尝试使用 GET 变量（即 yoursite.com/page?sessionid），但是，根据我的经验，无论 GET 变量如何，IE 仍然会在同一域中跨页面缓存 favicon。事实上，微软的文档说你可以使用链接标签让不同的页面有不同的favicon，但是，我经常发现即使你更改链接标签而不清除缓存，IE的favicon缓存也不会更新。另外，如果您关闭了所有缓存，IE 根本不会显示网站图标。而且，在某些版本的 IE 中，链接标签似乎也不优先于默认位置的任何图标。
然而，我已经成功地使用路由脚本将请求发送到正确的页面，然后将 sessionid 作为路径的一部分（即 yoursite.com/page/sessionid）附加。这需要在路由脚本中进行一些额外的工作来忽略 sessionid，但根据我的经验，这是唯一可以让 IE 识别不同会话的不同图标的可靠方法。