no-img
اِمیلاسلام کاربر مهمان. امروز دوشنبه ۲۷ آبان ۱۳۹۸


ادامه مطلب

بروزرسانی؛ ۰۷ تیر ۱۳۹۸
باز کردن لینک های خارجی در تب جدید
امتیاز 4.50 ( 2 رای )
حمایت از emila.ir

باز کردن لینک های خارجی در تب جدید

بروزرسانی؛ ۰۷ تیر ۱۳۹۸

در طراحی وب سایت لینک ها به دو قسمت کلی داخلی و خارجی تقسیم می شوند:

لینک های داخلی: به لینک هایی گفته میشود که پس از کلیک بر روی آنها , وارد قسمت دیگری از همان وب سایت خواهید شد . ( مثلا از قسمت محصولات وب سایت emila به قسمت تماس با مای  وب سایت emila می روید )

لینک های خارجی: به لینک هایی گفته می شود که پس از کلیک بر روی آنها , از وب سایت کنونی خارج می شوید و وارد یک وب سایت دیگر می شوید. ( مثلا از وب سایت emila.ir به وب سایت b میروید )

اگر شما در سایت خود به سایت های دیگر لینک داده‌اید توجه داشته باشید که لینک‌های خارجی می‌تواند حواس کاربران را از سایت شما پرت کنند. کاربران وقتی روی لینک جدید کلیک می‌کنند معمولا دیگر پشت سرشان را هم نگاه نمی‌کنند!

یک راه حل خوب برای این مشکل باز کردن لینک‌های خارجی در تب است تا وبسایت شما برای کاربر باز بماند، شاید فرصتی شد و از چند صفحه‌ی دیگر سایت شما بازدید کرد!

در اصول حرفه ای طراحی وب سایت، بهتر است لینک های داخلی در همان تب باز شوند و لینک های خارجی در تب جدید بازشوند. به همین دلیل در این پست از emila.ir کدهایی را قرار داده ایم که می توانید این عمل را به صورت اتوماتیک انجام دهید، یعنی از این پس به صورت اتوماتیک، لینک های خارجی وب سایت شما در تب جدید باز خواهند شد. ( به آنها خاصیت “target=”_blank داده خواهد شد. )

یک کد بصورت زیر است:

$('a').each(function() {
//emila.ir
var href = $(this).attr('href');
var link = href.indexOf(window.location.hostname);
if(link == -1){
$(this).attr('target', "_blank");
}
}

کد را در قسمتی از سایت خود قرار دهید که اجرا شود. این کد تگ های a را بررسی می‌کند، در صورتی که لینک خارجی بود target آن را _blank می کند.

اگر این کد کاربردی نبود می توانید از قطعه کد جاوا اسکریپت زیر در صفحات وبسایت خود استفاده کنید. ( بهتر است قبل از بسته شدن تگ <body/> کپی کنید ) 😉

<script type="text/javascript" language="javascript"> for (var links = document.links, i = 0, a; a = links[i]; i++) { if (a.host !== location.host) { a.target = '_blank'; } } </script>

بیشتر : باز شدن تمامی لینک ها در تب جدید


موضوع : وب/ برچسب : , , / لینک کوتاه : https://emila.ir/?p=14130
designer