웹 사이트 favicon을 동적으로 변경
현재 로그인 한 사용자에 따라 브랜딩 된 웹 응용 프로그램이 있습니다. 페이지의 즐겨 찾기 아이콘을 개인 레이블의 로고로 변경하고 싶지만 코드 나 방법에 대한 예제를 찾을 수 없습니다 이것을하기 위해. 아무도 전에 이것을 성공적으로 했습니까?
폴더에 12 개의 아이콘이있는 것을 상상하고 있으며 favicon.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" />
이 링크에서 HREF 요소를 변경하여 Javascript를 사용하여 즐겨 찾기 아이콘을 변경할 수 있습니다 (예 : JQuery를 사용한다고 가정).
$("#favicon").attr("href","favicon2.png");
Favicon Defender 와 마찬가지로 Canvas 요소를 만들고 HREF를 캔버스의 ToDataURL ()로 설정할 수도 있습니다 .
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";
보다 현대적인 접근 방식 :
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에 동적 파비콘 지원을 추가하는 데 사용하는 코드는 다음과 같습니다. IE 또는 Safari를 작동시킬 수 없었습니다. 기본적으로 Chrome은 동적 파비콘을 허용하지만 페이지의 위치 (또는 그 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.change("ICON URL")위의 내용을 사용하십시오.
( 이 코드를 기반 으로 한 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 웹 구성의 httpHandlers 섹션에서 해당 핸들러를 사용하거나 IIS7의 'Handler Mappings'기능을 사용할 수 있습니다.
IE에서이 작업을 수행 할 수있는 유일한 방법은 웹 서버가 서버 측 스크립팅 언어 (PHP, .NET 등)를 호출하도록 * .ico에 대한 요청을 처리하도록 설정하는 것입니다. 또한 * .ico를 설정하여 단일 스크립트로 리디렉션하고이 스크립트가 올바른 즐겨 찾기 아이콘 파일을 제공하도록하십시오. 다른 즐겨 찾기 아이콘 사이에서 동일한 브라우저에서 앞뒤로 튕길 수 있기를 원한다면 캐시에 흥미로운 문제가 여전히있을 것입니다.
jQuery를 사용하는 사람들을위한 단일 회선 솔루션이 있습니다.
$("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');
WikiPedia 에 따르면 섹션 의 link태그를 사용하여 head매개 변수를 로로드 할 즐겨 찾기 아이콘 파일을 지정할 수 있습니다 rel="icon".
예를 들면 다음과 같습니다.
<link rel="icon" type="image/png" href="/path/image.png">
해당 통화에 대한 동적 컨텐츠를 작성하려는 경우 쿠키에 액세스하여 세션 정보를 그런 식으로 검색하고 적절한 컨텐츠를 제시 할 수 있다고 생각합니다.
파일 형식이 손상 될 수 있습니다 (IE는 .ICO 형식 만 지원하지만 대부분의 다른 사람들은 PNG 및 GIF 이미지를 지원합니다). 브라우저와 프록시를 통해 문제를 캐싱 할 수 있습니다. 이는 즐겨 찾기 아이콘의 원래 의도, 특히 사이트의 미니 로고로 책갈피를 표시하기위한 것입니다.
네 가능합니다
- favicon.ico 다음에 querystring 을 사용하십시오 (및 기타 파일 링크-아래의 답변 링크 참조).
- 서버가 올바른 이미지 파일 ( 정적 라우팅 규칙 또는 동적 서버 측 코드 일 수 있음)로 "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());
https://koddsson.com/posts/emoji-favicon/의 소품
내 프로젝트에서 favico.js 를 사용 합니다.
즐겨 찾기 아이콘을 미리 정의 된 모양 및 사용자 지정 모양으로 변경할 수 있습니다.
내부적으로는 아이콘 인코딩을 canvas위한 렌더링 및 base64데이터 URL에 사용됩니다.
라이브러리에는 아이콘 배지와 애니메이션; 또한 웹캠 비디오를 아이콘으로 스트리밍 할 수도 있습니다. :)
참고 URL : https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically
'Programing' 카테고리의 다른 글
| 유형이 하위 유형인지 또는 객체 유형인지 어떻게 확인합니까? (0) | 2020.03.10 |
|---|---|
| Android 앱을 출시하기 전에 "해야 할 일"목록 (0) | 2020.03.10 |
| FileSystemWatcher 변경된 이벤트가 두 번 발생합니다 (0) | 2020.03.10 |
| 이 C 함수는 항상 false를 반환해야하지만 그렇지 않습니다. (0) | 2020.03.10 |
| $ 객체를보고 (0) | 2020.03.10 |