تغيير أيقونة الموقع المفضلة ديناميكيًا

StackOverflow https://stackoverflow.com/questions/260857

  •  06-07-2019
  •  | 
  •  

سؤال

لدي تطبيق ويب تم تصميمه وفقًا للمستخدم الذي قام بتسجيل الدخول حاليًا.أرغب في تغيير الرمز المفضل للصفحة ليكون شعارًا للعلامة الخاصة، لكن لا يمكنني العثور على أي رمز أو أي أمثلة لكيفية القيام بذلك.هل قام أي شخص بهذا بنجاح من قبل؟

أتخيل وجود عشرات الأيقونات في مجلد، ويتم إنشاء المرجع إلى ملف 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);
})();

يجب أن يكون فايرفوكس بارد معها.

تحرير الكتابة بشكل صحيح الرموز الموجودة

نصائح أخرى

إليك بعض التعليمات البرمجية التي تعمل في فايرفوكس، أوبرا، وكروم (على عكس كل إجابة أخرى نشرت هنا). هنا هو مختلف التجريبية من التعليمات البرمجية التي تعمل في IE11 جدا. المثال التالي قد لا تعمل في سفاري أو 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');
};

شوكة بعيدا أو <وأ href = "http://mathiasbynens.be/demo/dynamic- ففيكنس "يختلط =" noreferrer "> عرض تجريبي .

إذا كان لديك مقتطف HTML التالي:

<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />

يمكنك تغيير الأيقونة المفضلة باستخدام Javascript عن طريق تغيير عنصر HREF على هذا الرابط، على سبيل المثال (بافتراض أنك تستخدم JQuery):

$("#favicon").attr("href","favicon2.png");

يمكنك أيضًا إنشاء عنصر Canvas وتعيين HREF كـ ToDataURL() للوحة القماشية، تمامًا مثل المدافع المفضل يفعل.

نسخة مسج:

$("link[rel='shortcut icon']").attr("href", "favicon.ico");

أو حتى أفضل:

$("link[rel*='icon']").attr("href", "favicon.ico");

الفانيليا شبيبة الإصدار:

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")

ويتم تعريف فافيكون في العلامة الرأس مع شيء من هذا القبيل: 

<link rel="shortcut icon" type="image/ico" href="favicon.ico">

ويجب أن تكون قادرة على مجرد تمرير اسم الرمز الذي تريد جنبا إلى جنب في عرض البيانات ورميها في علامة الرأس.

إليك بعض التعليمات البرمجية التي يمكنني استخدامها لإضافة دعم فافيكون ديناميكي لأوبرا، فايرفوكس وكروم. لم أستطع الحصول على IE أو سفاري العمل على الرغم من. في الأساس كروم يسمح ففيكنس ديناميكية، ولكن فإنه يقوم بتحديث لهم فقط عندما يتغير موقع للصفحة (أو غيرها 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 للحصول على رمز I يستند هذا في.)

وأود أن استخدام نهج جريج وجعل معالج مخصص ل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;
    }
    }
}

وبعد ذلك يمكنك استخدام هذا المعالج في قسم httpHandlers من التكوين على شبكة الإنترنت في IIS6 أو استخدام ميزة "تعيينات معالج" في IIS7.

والطريقة الوحيدة لجعل هذا العمل لIE هي تحدد لك خادم الويب لعلاج طلبات * منظمة البن الدولية لدعوة خادم البرمجة الجانب لغة (PHP، .NET، الخ). أيضا الإعداد * منظمة البن الدولية لإعادة توجيه إلى برنامج نصي واحد ويكون هذا السيناريو تسليم ملف فافيكون الصحيح. أنا متأكد من لا يزال هناك ستكون بعض القضايا المثيرة للاهتمام مع ذاكرة التخزين المؤقت إذا كنت تريد أن تكون قادرة على استعادة لياقته وإيابا في المتصفح نفسه بين ففيكنس مختلفة.

وهناك حل سطر واحد بالنسبة لأولئك الذين يستخدمون مسج: 

$("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');

ووفقا ل يكيبيديا ، يمكنك تحديد أي ملف فافيكون تحميل باستخدام علامة link في قسم head، مع معلمة من rel="icon".

وعلى سبيل المثال: 

 <link rel="icon" type="image/png" href="/path/image.png">

وأتصور إذا أردت كتابة بعض المحتوى الديناميكي لتلك الدعوة، سيكون لديك الوصول إلى ملفات تعريف الارتباط بحيث يمكن استرجاع المعلومات جلسة العمل الخاصة بك بهذه الطريقة والمحتوى المناسب الحالي.

ويمكنك الوقوع تحت طائلة من صيغ الملفات (يقال IE تدعم سوى انها شكل .ICO، بينما معظم الجميع يدعم الصور PNG و GIF) والقضايا ربما التخزين المؤقت، سواء على المتصفح ومن خلال وكلاء. وهذا سيكون بسبب itention الأصلي من فافيكون، وتحديدا، لوضع علامات مرجعية مع ميني شعار للموقع.

نعم من الممكن تماما

  • استخدام querystring بعد فافيكون.ico (وغيرها من الملفات الروابط انظر الإجابة على الرابط أدناه)
  • ببساطة تأكد من أن الملقم يستجيب "someUserId" مع الصحيح ملف الصورة (التي يمكن أن تكون ثابت قواعد التوجيه ، أو ديناميكية برمجية من جانب الخادم).

على سبيل المثال 

<link rel="shortcut icon" href="/favicon.ico?userId=someUserId">

ثم أيا كان من جانب الخادم اللغة / الإطار كنت تستخدم يجب أن تكون قادرة بسهولة على العثور على الملف استنادا إلى معرف المستخدم وخدمتها في استجابة لهذا الطلب.

ولكن أن تفعل أفضل الرموز بشكل صحيح (لها في الواقع حقا الموضوع المعقد) الرجاء مراجعة الإجابة هنا 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 لترميز رمز.

ويضم مكتبة أيضا ملامح لطيفة: شارات رمز والرسوم المتحركة. يزعم، يمكنك حتى تيار كاميرا الفيديو إلى رمز:)

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top