IE中每个浏览器选项卡中的不同图标 [英] Different favicon in each browser tab in IE
问题描述
我们的应用程序中有一个自定义会话机制，允许用户在每个浏览器选项卡中使用不同的会话（例如，不同的凭据），即使URL相同。这种机制适用于所有主流浏览器，包括IE（v11）。
We have a custom session mechanism in our application, that allows user to have different session (e.g., different credentials) in each browser tab, even if URLs are the same. This mechanism works great in all major browsers including IE (v11).
问题
我们希望为每个浏览器选项卡提供不同的favicon（具有不同的颜色），以指示哪个选项卡属于哪个会话。为此，我们根据会话设置不同的favicon URL
We want to supply each browser tab with different favicon (with different color) to indicate which tab belongs to which session. To do that, we set different favicon URL depending on session using
<link rel='icon' href='url_to_favicon_session_id' type='image/ico'/>
它在Firefox和Chrome中运行良好，但IE似乎在指向相同的所有标签之间共享图标URL（每个标签中的图标相同，加载顺序确定每个标签中可见的图标）。
It works great in Firefox and Chrome, however IE seems to share favicon between all tabs pointing at the same URL (icon is the same in each tab, order of loading determinates favicon visible in each tab).
问题
我们可以强制IE以某种方式不使用相同的URL在浏览器选项卡之间共享favicon吗？
Can we force IE somehow to not share favicons across browser tabs with the same URLs?
注意，更改URL不是一个选项这里。
Note, changing URL is not an option here.
最小工作示例
以下完整代码片段重现问题（将它放在网络服务器上以支持HTML5在IE中运行;在同一浏览器的许多选项卡中打开此文件。）
Below full code snippet to reproduce problem (put it on a webserver to run in IE with HTML5 support; Open this file in many tabs of the same browser).
<!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，以及几乎所有其他浏览器，使用与页面缓存分开的缓存机制，以防止不断检索favicon。这意味着除非更改URL并清除域的缓存，否则对favicon的更改可能是不可预测的。我能看到的唯一可靠的方法是添加一个唯一的ID来识别每个会话的选项卡，迫使IE分别缓存每个会话的图标。
In my experience, IE, along with almost all other browsers, uses a cache mechanism separate from the cache of the page to prevent constant retrieval of favicons. This means that changes to the favicon can be unpredictable unless the url is changed and the cache for the domain cleared. The only reliable way I can see around this is to add a unique id to identify the tab for each session forcing IE to cache each sessions's icon separately.
你可以尝试一个GET变量（即yoursite.com/page?sessionid），但是，根据我的经验，IE仍然缓存在同一域中的页面上的图标，而不管GET变量。事实上，微软的文档说你可以使用链接标签让不同的页面有不同的图标，但是，我经常发现即使你更改链接标签而不清除缓存，IE的图标缓存也不会更新。此外，如果您关闭了所有缓存，IE将根本不显示图标。并且，似乎在某些版本的IE中，链接标记不优先于默认位置的任何图标。
You can try a GET variable (i.e. yoursite.com/page?sessionid), however, in my experience, IE still cache's the favicon across page in the same domain regardless of GET variable. In fact, Microsoft's documentation says that you can use the link tag to get different pages to have different favicon's, however, I often find that IE's favicon cache won't update even if you change the link tag without clearing the cache. Also, IE won't display a favicon at all if you have all caching turned off. And, it appears that in some versions of IE, the link tag doesn't take precedence over whatever favicon is at the default location either.
我已经取得了一些成功然而，使用路由脚本将请求发送到正确的页面，然后将sessionid作为路径的一部分附加（即，yoursite.com/page/sessionid）。这需要在您的路由脚本中进行一些额外的工作来忽略sessionid，但根据我的经验，这是唯一可靠的方法，可以让IE在不同的会话中识别不同的图标。
I have had some success with using a routing script to get requests to the right page and then appending the sessionid as part of the path (ie. yoursite.com/page/sessionid), however. This requires a bit of extra work in your routing script to ignore the sessionid but it is the only thing, in my experience, that worked simi-reliably to get IE to recognize different favicon's for different sessions.
这篇关于IE中每个浏览器选项卡中的不同图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
