题
我有一个网应用程序的品牌根据的用户,目前的登录。我想要改变该网站的页面上可标志的私人标签,但我无法找到任何代码或任意的例子如何做到这一点。有人成功地完成这之前呢?
我想象具有十几个图标中的一个文件夹和参考图标。ico文件的使用仅仅是动态产生着与HTML网页。想法?
解决方案
为什么不呢?
(function() {
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'http://www.stackoverflow.com/favicon.ico';
document.getElementsByTagName('head')[0].appendChild(link);
})();
Firefox应该很酷。
编辑以正确覆盖现有图标
其他提示
以下是一些适用于Firefox,Opera和Chrome的代码(与此处发布的所有其他答案不同)。这是一个不同的在IE11中运行的代码演示。以下示例可能无法在Safari或Internet Explorer中使用。
/*!
* Dynamically changing favicons with JavaScript
* Works in all A-grade browsers except Safari and Internet Explorer
* Demo: http://mathiasbynens.be/demo/dynamic-favicons
*/
// HTML5™, baby! http://mathiasbynens.be/notes/document-head
document.head = document.head || document.getElementsByTagName('head')[0];
function changeFavicon(src) {
var link = document.createElement('link'),
oldLink = document.getElementById('dynamic-favicon');
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon';
link.href = src;
if (oldLink) {
document.head.removeChild(oldLink);
}
document.head.appendChild(link);
}
然后您将按如下方式使用它:
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
changeFavicon('http://www.google.com/favicon.ico');
};
如果你有以下HTML段:
<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />
你可以改变的图标使用Javascript通过改变HREF元这个链接,例如(假设你正在使用JQuery):
$("#favicon").attr("href","favicon2.png");
你还可以创建一个帆布件和设HREF作为一个ToDataURL()的画布上,很像 图标后卫 不。
jQuery版本:
$("link[rel='shortcut icon']").attr("href", "favicon.ico");
甚至更好:
$("link[rel*='icon']").attr("href", "favicon.ico");
Vanilla JS版本:
document.querySelector("link[rel='shortcut icon']").href = "favicon.ico";
document.querySelector("link[rel*='icon']").href = "favicon.ico";
更现代的方法:
const changeFavicon = link => {
let $favicon = document.querySelector('link[rel="icon"]')
// If a <link rel="icon"> element already exists,
// change its href to the given link.
if ($favicon !== null) {
$favicon.href = link
// Otherwise, create a new element and append it to <head>.
} else {
$favicon = document.createElement("link")
$favicon.rel = "icon"
$favicon.href = link
document.head.appendChild($favicon)
}
}
然后您可以像这样使用它:
changeFavicon("http://www.stackoverflow.com/favicon.ico")
favicon在head标签中声明为:
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
您应该只能在视图数据中传递所需图标的名称,并将其放入头标记。
这是我用来为Opera,Firefox和Chrome添加动态favicon支持的一些代码。我无法让IE或Safari工作。基本上Chrome允许动态的favicons,但只有当页面的位置(或其中的 iframe
等)发生变化时才会更新它们:
var IE = navigator.userAgent.indexOf("MSIE")!=-1
var favicon = {
change: function(iconURL) {
if (arguments.length == 2) {
document.title = optionalDocTitle}
this.addLink(iconURL, "icon")
this.addLink(iconURL, "shortcut icon")
// Google Chrome HACK - whenever an IFrame changes location
// (even to about:blank), it updates the favicon for some reason
// It doesn't work on Safari at all though :-(
if (!IE) { // Disable the IE "click" sound
if (!window.__IFrame) {
__IFrame = document.createElement('iframe')
var s = __IFrame.style
s.height = s.width = s.left = s.top = s.border = 0
s.position = 'absolute'
s.visibility = 'hidden'
document.body.appendChild(__IFrame)}
__IFrame.src = 'about:blank'}},
addLink: function(iconURL, relValue) {
var link = document.createElement("link")
link.type = "image/x-icon"
link.rel = relValue
link.href = iconURL
this.removeLinkIfExists(relValue)
this.docHead.appendChild(link)},
removeLinkIfExists: function(relValue) {
var links = this.docHead.getElementsByTagName("link");
for (var i=0; i<links.length; i++) {
var link = links[i]
if (link.type == "image/x-icon" && link.rel == relValue) {
this.docHead.removeChild(link)
return}}}, // Assuming only one match at most.
docHead: document.getElementsByTagName("head")[0]}
要更改favicon,只需使用上述内容 favicon.change(&quot; ICON URL&quot;)
。
(以 http://softwareas.com/dynamic-favicons 为基础,我的代码基于此上。)
我会使用Greg的方法为favicon.ico制作一个自定义处理程序 这是一个(简化的)处理程序:
using System;
using System.IO;
using System.Web;
namespace FaviconOverrider
{
public class IcoHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "image/x-icon";
byte[] imageData = imageToByteArray(context.Server.MapPath("/ear.ico"));
context.Response.BinaryWrite(imageData);
}
public bool IsReusable
{
get { return true; }
}
public byte[] imageToByteArray(string imagePath)
{
byte[] imageByteArray;
using (FileStream fs = new FileStream(imagePath, FileMode.Open, FileAccess.Read))
{
imageByteArray = new byte[fs.Length];
fs.Read(imageByteArray, 0, imageByteArray.Length);
}
return imageByteArray;
}
}
}
然后,您可以在IIS6中的Web配置的httpHandlers部分中使用该处理程序,或使用IIS7中的“处理程序映射”功能。
使IE工作的唯一方法是将Web服务器设置为处理* .ico的请求以调用服务器端脚本语言(PHP,.NET等)。还要设置* .ico以重定向到单个脚本,并让此脚本提供正确的favicon文件。如果您希望能够在不同的favicons之间的同一浏览器中来回跳转,我相信缓存仍会存在一些有趣的问题。
对于那些使用jQuery的人来说,有一个单行解决方案:
$("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');
根据 WikiPedia ,您可以使用指定要加载的favicon文件
标记,参数为 head
部分中的链接 rel =&quot; icon&quot;
。
例如:
<link rel="icon" type="image/png" href="/path/image.png">
我想如果您想为该通话编写一些动态内容,您可以访问Cookie,这样您就可以检索会话信息并提供适当的内容。
你可能会违反文件格式(IE据说只支持它的.ICO格式,而大多数其他人都支持PNG和GIF图像)以及可能的缓存问题,无论是在浏览器上还是通过代理。这可能是因为favicon的原始版本,特别是用于标记带有网站迷你徽标的书签。
是的,完全可能的
- 使用 查询 之后的图标。ico(和其他文件的链接 看到答案下面的链接)
- 只是确保服务器作出响应"someUserId"与 正确的图像的文件(可能 静 路规则,或 动态 服务器侧码)。
例如
<link rel="shortcut icon" href="/favicon.ico?userId=someUserId">
然后 什么服务器方语言/框架 你应该使用能够轻松地找到的 文件的基础上userId 并成为它的 应这一请求.
但是,要做到正确地图标 (实际上它的 真的 复杂的主题)请参见答案在这里 https://stackoverflow.com/a/45301651/661584
一个很容易得多 比工作的所有细节,自己。
享受。
或者如果你想要一个表情符号:)
var canvas = document.createElement("canvas");
canvas.height = 64;
canvas.width = 64;
var ctx = canvas.getContext("2d");
ctx.font = "64px serif";
ctx.fillText("☠️", 0, 64);
$("link[rel*='icon']").prop("href", canvas.toDataURL());
我在我的项目中使用 favico.js 。
它允许将favicon更改为一系列预定义形状以及自定义形状。
在内部,它使用 canvas
进行渲染,使用 base64
数据URL进行图标编码。
图书馆也有很好的功能:图标徽章和动画;据称,您甚至可以将网络摄像头视频流式传输到图标:)