נניח שבנינו אתר ובאתר הזה אפשר לשתף עם משתמשים אחרים לינקים שאנחנו אוהבים מכל מיני אתרים שונים.
אנחנו כבעלי האתר, רוצים להציג את התמונה המתאימה לכל לינק, מה שאנחנו יכולים לעשות הוא למשוך את ה-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 – זו הקריאה לפונקציה שלנו.





