現在ログインしているユーザーに応じてブランド化された Web アプリケーションがあります。ページのファビコンをプライベート ラベルのロゴに変更したいのですが、コードや方法の例が見つかりません。これをする。以前にこれを成功させた人はいますか？
フォルダーに多数のアイコンがあり、使用する favicon.ico ファイルへの参照が HTML ページと共に動的に生成されることを想像しています。考え？
244015 次
18 に答える
502
なぜだめですか？
var link = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement('link');
link.rel = 'icon';
document.getElementsByTagName('head')[0].appendChild(link);
}
link.href = 'https://stackoverflow.com/favicon.ico';
于 2008-11-04T04:21:38.243 に答える
101
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');
};
于 2010-06-08T07:46:30.603 に答える
52
次の HTML スニペットがある場合:
<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />
たとえば、このリンクの HREF 要素を変更することで、Javascript を使用してファビコンを変更できます (JQuery を使用していると仮定します)。
$("#favicon").attr("href","favicon2.png");
Favicon Defenderと同じように、Canvas 要素を作成し、HREF をキャンバスの ToDataURL() として設定することもできます。
于 2008-11-04T04:22:06.183 に答える
41
jQuery バージョン:
$("link[rel='shortcut icon']").attr("href", "favicon.ico");
またはさらに良い：
$("link[rel*='icon']").attr("href", "favicon.ico");
バニラ JS バージョン:
document.querySelector("link[rel='shortcut icon']").href = "favicon.ico";
document.querySelector("link[rel*='icon']").href = "favicon.ico";
于 2014-06-14T19:49:21.687 に答える
23
より現代的なアプローチ:
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")
于 2016-03-12T16:43:57.523 に答える
12
favicon は head タグで次のように宣言されます。
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
ビューデータで必要なアイコンの名前を渡し、それをヘッドタグにスローするだけでよいはずです。
于 2008-11-04T04:20:50.243 に答える
9
Opera、Firefox、および Chrome に動的ファビコンのサポートを追加するために使用するコードを次に示します。ただし、IEまたはSafariを機能させることができませんでした。iframe基本的に、Chrome は動的ファビコンを許可しますが、私が知る限り、ページの場所 (またはその中のその他) が変更された場合にのみ更新されます。
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.change("ICON URL")は、上記を使用してください。
(私がこれに基づいたコードについてhttp://softwareas.com/dynamic-faviconsに感謝します。)
于 2010-05-27T09:10:42.467 に答える
4
グレッグのアプローチを使用して、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の「ハンドラーマッピング」機能を使用できます。
于 2011-06-25T04:52:17.100 に答える
4
IE でこれを機能させる唯一の方法は、*.ico の要求を処理してサーバー側のスクリプト言語 (PHP、.NET など) を呼び出すように Web サーバーを設定することです。また、単一のスクリプトにリダイレクトするように *.ico をセットアップし、このスクリプトが正しい favicon ファイルを配信するようにします。同じブラウザで異なるファビコン間を行き来できるようにしたい場合は、キャッシュに関するいくつかの興味深い問題がまだあると確信しています.
于 2011-01-24T16:19:50.057 に答える
2
WikiPediaによると、セクションlink内の タグを使用して、どの favicon ファイルをロードするかをのパラメータで指定できます。headrel="icon"
例えば：
<link rel="icon" type="image/png" href="/path/image.png">
その呼び出しの動的コンテンツを書きたい場合は、Cookie にアクセスできるので、その方法でセッション情報を取得し、適切なコンテンツを表示できると思います。
ファイル形式 (IE は .ICO 形式のみをサポートしていると伝えられていますが、その他のほとんどは PNG および GIF 画像をサポートしています) に違反する可能性があり、ブラウザーとプロキシの両方でキャッシュの問題が発生する可能性があります。これは、ファビコンの本来の目的、特にサイトのミニロゴでブックマークをマークするためです。
于 2008-11-04T04:23:13.827 に答える