اگر دقت كرده باشيد در كنار هر لينك خارجي (هر لينك ختم شده به خارج از سايت) در اين وبلاگ، آيكون آن سايت هم به صورت خودكار نمايش داده مي‌شود. از نظر من جالب بوده (خصوصا جهت مشخص كردن وجود يك لينك در ميان انبوهي متن، يا براي نمايش ليستي از لينك‌ها)، نظر شما رو نمي‌دونم!
اين‌كار در ادامه‌ي مطلبي است كه در مورد نوشتن اسكريپت‌هاي گريس مانكي چندي قبل منتشر كردم. البته بهبود يافته‌ي آن است. براي ايجاد يك چنين قابليتي در سايت فقط كافي است چند سطر اسكريپت زير را به هدر سايت خود اضافه كنيد.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript' />
<script type="text/javascript">
$(document).ready(function(){
$("a").each(function(){
var $a = $(this);
var href = $a.attr("href");
// see if the link is external
if (href && href.match(/^http/))
if (!href.match(document.domain)) {
var domain = href.replace(/<\S[^><]*>/g, "").split('/')[2];
var image = '<img src="http://' + domain +
'/favicon.ico" width="0" ' +
' onload="this.width=16;this.height=16;this.style.paddingLeft=\'3px\';this.style.paddingRight=\'1px\';" ' +
' style="border:0" ' +
' onerror="this.src=\'http://vahid.nasiri.googlepages.com/weblink.gif\';" />';
$(this).prepend(image);
}
});
});
</script>
با استفاده از jQuery ، زمانيكه document ما ready شد ( document.ready )، تمام لينك‌هاي موجود در صفحه را پيدا مي‌كنيم (يك به يك). سپس مقدار href آن‌ها را مي‌خوانيم (ببينيد با jQuery انجام اين نوع كارها چقدر ساده شده است). اكنون روي لينك دريافت شده بايد پردازش صورت گيرد و نام دومين آن جدا شود (اگر ختم به خارج از سايت بود). سپس بر اساس اين دومين ، يك تگ img منتهي به آيكون آن سايت طراحي و نمايش داده خواهد شد (به قبل از لينك اضافه مي‌شود).
عموما هر پروژه‌اي هر چند كوچك و به ظاهر كم اهميت، نكات خاصي را به همراه دارد.
براي مثال، در ابتداي كار width=0 در نظر گرفته نشد. مشكلي را كه ايجاد كرد اين بود كه يك سايت ممكن است اصلا favicon.ico نداشته باشد. فايرفاكس محترم اصلا به روي مبارك هم نخواهد آورد و شما متوجه نخواهيد شد كه در صفحه كمبود تصويري وجود دارد. اما در IE حتما جاي خالي آيكون و تصوير به نحوه واضحي گوشزد مي‌شود. بنابراين در ابتداي كار قرار نيست چيزي را نمايش دهيم (width=0). سپس در رخ‌داد onload تگ img، اگر تصوير واقعا وجود داشت و بارگذاري شد، طول و عرض آن‌را 16 در 16 قرار خواهيم داد (اين مورد هم لازم است. چون بعضي از سايت‌ها اندازه‌هاي بسيار بزرگي را براي آيكون خود در نظر مي‌گيرند كه اصلا مقصود ما را برآورده نخواهند كرد).
اين مورد (عدم نمايش تصاويري كه وجود ندارند) مشكلي را كه در ادامه ايجاد خواهد كرد، عدم يكنواختي در سايت است. يك سري از لينك‌هاي خارجي آيكون دارند و يك سري خير. نكته جالبي كه در مورد تگ img وجود دارد رخ‌داد onerror آن است. اگر مرورگر نتواند تصوير مورد نظر را پيدا يا بارگذاري كند، اين روال رخ‌داد گردان فراخواني مي‌شود. همينجا از موقعيت استفاده شده و src تصوير جاري به يك آيكون مشخص و از قبل تعيين شده تنظيم مي‌شود.
