קודקודייל
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
קודקודייל
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
ראשי ♦ HTML ♦ איך למשוך דינמית favicon של אתרים אחרים ב-JS

איך למשוך דינמית favicon של אתרים אחרים ב-JS

עידן יצחקי 1 באוקטובר 2021 אין תגובות

נניח שבנינו אתר ובאתר הזה אפשר לשתף עם משתמשים אחרים לינקים שאנחנו אוהבים מכל מיני אתרים שונים.

אנחנו כבעלי האתר, רוצים להציג את התמונה המתאימה לכל לינק, מה שאנחנו יכולים לעשות הוא למשוך את ה-favicon מכל אתר בהנחה שיש לו אחד כזה ואין חסימה של FW/CORES ספציפי לזה וכך אם בעל האתר יעדכן את ה-favicon, אנחנו נתעדכן אוטומטית.

במידה שאין לאתר favicon או לחילופין הוא במיקום אחר ולא ב-root או בשם אחר ובכלל אם לא הצלחנו למשוך את התמונה אז אנחנו לא ניצור אצלנו בדף תגית img.

נתחיל עם HTML פשוט

<div class="container">
            <h1>faviconjs Demo</h1>
            <a class="favicon" href="https://facebook.com">facebook.com</a>
            <a class="favicon" href="https://twitter.com">twitter.com</a>
            <a class="favicon" href="https://google.com">google.com</a>
            <a class="favicon" href="http://www.jqueryscript.net">jQueryScript.net</a>
            <a class="favicon" href="https://webration.net">Webration</a>
            <a class="favicon" href="https://codcodile.co.il">codcodile</a>
            <a class="favicon" href="https://ynet.co.il">ynet</a>
            <a class="favicon" href="https://walla.co.il">walla</a>
            <a class="favicon" href="https://msn.com">msn</a>
            <a class="favicon" href="https://linkedin.com">linkedin</a>
        </div>

רשימה של לינקים ללא תמונות (רשימה שיכולה להגיע מה-DB).

נוסיף עיצוב לתמונות שאנחנו הולכים לייצר

  .favicon-img {
            height: 16px;
            margin: 0 4px;
            vertical-align: text-bottom;
        }

עכשיו לחלק האומנותי, ה-JS

  function faviconInit() {
            var faviconLinks = document.getElementsByClassName("favicon");
            var fileTypes = ['ico', 'png', 'jpg'];

            var creatImg = () => {
                var favicon = document.createElement("img");
                favicon.className = "favicon-img";
                return favicon;
            }

            var urlToDomain = (url) => {
                var parserA = document.createElement('a');
                parserA.href = url;
                return parserA.protocol + "//" + parserA.hostname + "/";
            }

            var checkImg = (url, callback) => {
                var imgFav = new Image();
                imgFav.src = url;
                if (imgFav.complete) {
                    callback({ status: true, url: url });
                } else {
                    imgFav.onload = () => {
                        callback({ status: true, url: url });
                    };

                    imgFav.onerror = () => {
                        callback({ status: false, url: url });
                    };
                }
            }

            var faviconUrl = (domain, fTypes, element) => {
                for (let i = 0; i < fTypes.length; i++) {
                    var url = domain + "favicon." + fTypes[i];
                    checkImg(url, (exists) => {
                        if (exists.status) {
                            var img = creatImg();
                            img.src = exists.url;
                            element.insertBefore(img, element.firstChild);
                        }
                    });
                }
            }

            for (let idx = 0; idx < faviconLinks.length; idx++) {
                var domain = urlToDomain(faviconLinks[idx].href);
                faviconUrl(domain, fileTypes, faviconLinks[idx]);
            }


        }
        faviconInit();

יש לנו פינקציה אחת (faviconInit) שמריצה בתוכה פונקציות נוספות ואנחנו מיד נדבר עליהם.

שורה 2 – מערך של כל הקישורים בעלי class בשם favicon, ה-class משמש כמו דגל עבור ה-js , כדי לסמן איזה קישורים ספציפים לקחת ולא את כל הקישורים במסך.

שורה 3 – מערך של סיומות קבצים, אם מעניין אותנו רק ico, אפשר למחוק את השאר, אם ורוצים להוסיף בדיקות של סיומות קבצים אז כמובן שאפשר להוסיף למערך.

הפונקציות בשאר הפרויקט הם משתנים ששווים לפונקציות, זאת אומרת, שהמשתנה הוא הפונקציה בעצמו.

שורה 5 – פונקציה שכל התפקיד שלה הוא ליצר תגית IMG, להוסיף לו class ולהחזיר אותו למי שקרא לפונקציה.

שורה 11 – זו פונקציה שהתפקיד שלה, לקחת URL ולפרק אותו לפרוטוקול שלו ולדומיין שלו. אנחנו עושים את זה כדי למחוק את כל המידע הנוסף שיכול להגיע ב-url וישבש לנו את הקריאה ל-favicon.

בפונקציה הזו אנחנו מיצרים תגית A , מזינים אותה ב-url, נותנים לדפדפן לעשות בשבילנו את העבודה ומושכים רק את הפרמטרים שמעניינים אותנו.

את הפרמטרים מחברים חזרה ל-url נקי ומוסיפים לוכסן בסוף.

שורה 17 – פונקציה שבודקת אם ה-url קיים ומצליח להוריד את התמונה.

בפונקציה אנחנו בודקים סטטוסים, אם הוא סיים (משמע תקין), אם הוא בתהליך אז בודקים איך התהליך מסתיים, onload מופעל כאשר התהליך הסתיים בהצלחה, onerror מופעל כאשר התהליך לא הסתיים בהצלחה.

שימו לב שהתהליכים לא סינכרונים ולכן אנחנו לא יודעים מתי הפעולה הזאת תבוצע, זו הסיבה ליצירה של המשתנה callback.

הוא מחזיר לנו אוביקט שמכיל status ואת ה-url שנבדק.

שורה 33 – תפקידה לעבור בכל לינק שהגיע מה-HTML ולבדוק את כל סוגי הסיומות שהוגדרו ובמידה שתמונה אחת חוזרת תקינה מהבדיקה, להוסיף אותה לקישור ב-html שנמצא בבדיקה.

במידה שנבדק דומיין ולא חזרה תמונה תקינה משום בדיקה אז הפונקציה לא תייצר תגית img בתוך הקישור.

שורה 36 – מפעילה את פונקצית הבדיקה של התמונה, מעבירה לפונקציה את ה-url וכפרמטר שני היא מעבירה פונקציה שלמה שמופעלת על פי התשובה מהבדיקה.

שורה 46 – זה המנוע שמפעיל את כל הפונקציות שעברנו עליהם למעלה.

זו לולאה שעוברת על כל המערך של הלינקים שהגיעו מתוך ה-html שלנו.

שורה 53 – זו הקריאה לפונקציה שלנו.

פוסטים קשורים:

תמונת אווירה של תקשורתפונקצית קריאה מ-JS ל-API בסיסית (XMLHttpRequest) תמונת אווירה חצים לשינויהמרה של אקסל למערך וממערך חזרה לאקסל בעזרת JS קורס בניית אתרים בוורדפרס – Custom Themeקורס בניית אתרים בוורדפרס – Custom Theme מדריך וורדפרס למתכנתים שיעור רביעי- מקורות ללמידת וורדפרסקורס בניית אתרים בוורדפרס – מקורות ללמידת וורדפרס
javascript

אודות המחבר

עידן יצחקי להציג את כל הפוסטים של עידן יצחקי


« פוסט קודם
פוסט הבא »

השארת תגובה

ביטול

חיפוש באתר
בחירת העורכים
29 בדצמבר 2023 עידן יצחקי

שדה טקסט עשיר עם תמונות

אתם הולכים להיות מופתעים עד כמה HTML יכול להיות חכם ולבצע משהו כל כך מורכב, שאם אנחנו היינו רוצים ליצור

1 באוקטובר 2021 עידן יצחקי

איך למשוך דינמית favicon של אתרים אחרים ב-JS

בפוסט זה נראה איך אפשר על פי לינקים בדף למשוך את ה-favicon מהדומיין שלהם באופן דינמי, בדיקה של תקינות התמונה

פופולרי
Javascript functions – היכרות עם סוגי פונקציות
Javascript
21 בדצמבר 2024 אין תגובות
Nested routing in angular standalone component
Typescript
15 בנובמבר 2024 תגובה אחת
בחרו לפי תגיות
angular blockchain css ethers express front-end fullstack GQL html javascript next js nextjs nodejs react hooks reactjs solidity webgl אנגולר בלוקציין וורדפרס לימודי אנגולר לימודי וורדפרס לימוד ריאקט מדריך front-end מדריך GQL מדריך אנגולר מדריך וורדפרס מדריך חינם react מדריך ריאקט מפתח בלוק מפתח בלוקציין מתכנת front-end מתכנת בלוקציין מתכנת פרונט סולידיטי קורס front end קורס fullstack קורס nextjs קורס אנגולר קורס בלוקציין קורס בלוקציין בחינם קורס סולידיטי קורס ריאקט קורס תכנות קורס תכנות בחינם
סינון על פי קטגוריות
CSS fullstack HTML IIS Javascript nodeJs SEO Typescript אנגולר בלוקציין בניית אתרים וורדפרס חיפוש עבודה כלים נוספים כללי נגישות קורסים ריאקט תלת מימד תקלות ופתרונות
צור קשר
כל הזכויות שמורות לקודקודייל
ליצירת קשר: @ קודקודייל
גלילה לראש העמוד