باز شدن لینک‌ها در صفحه جدید به صورت استاندارد

[echessdesign]

باز شدن لینک‌ها در صفحه جدید در صفحات استاندارد وب

همانطور که توسعه‌دهندگان وب که استاندارد سازی صفحات وب را مورد توجه قرار می‌دهند می‌دانند، در HTML 4.0 Strict و XHTML 1.0 Strict طبق نظر W3C دیگر شناسه target در تگ <a> معتبر نیست و وجود ندارد. البته ورژن‌های Transitional هنوز شامل این شناسه هستند اما این تعاریف خود در حال کنار گذاشته شدن هستند!

استانداردهای وب شاید براساس ایده‌ال‌هایی نوشته می‌شود که به ذهن می‌آید. این ایده‌ها گرچه با هدف "انجام کار به بهترین شکل" وضع می‌شوند اما در عمل ممکن است با واقعیت‌های امروز وب سازگاری نداشته باشند. یکی از دلایل اصلی حذف شناسه target این است که معتقدند html باید تنها به اطلاعاتی که در یک پنجره نمایش داده می‌شود رسیدگی کند.

یکی از مشکلات اصلی در استاندارد کردن صفحات وب اینجاست که استفاده اصلی شناسه target که باز شدن یک لینک در پنجره یا tab جدید با استفاده از target=_blank است، همچنان در صفحات امروزی پر کاربرد است و استانداردها می‌گوید نباید از آن استفاده کنیم! این نوشته پاسخ به این سوال است که چگونه لینک‌ها را در صفحات جدید باز کنیم و استانداردها را نیز رعایت کنیم...

با استفاده از برنامه‌نویسی سمت کلاینت و مشخصا JavaScript می‌توانیم به این هدف دست یابیم. اولین سوالی که به ذهن می‌رسد این است: در شرایطی که نمی‌توانیم از شناسه target استفاده کنیم، چگونه مشخص کنیم که می‌خواهیم کدام لینک‌ها در صفحات جدید باز شود؟!

گرچه در استانداردهای جدید شناسه target حذف شده اما به‌جای آن شناسه‌ای با عنوان rel (مخفف Relationship) اضافه شده است. این شناسه در واقع قرار است در یک مستند، رابطه‌ی بین صفحه جاری و صفحه‌ای که پیوند به آن زده شده را مشخص کند. مقادیر تعریف شده‌ای که این شناسه می‌تواند بگیرد (next, previous, chapter, section و...) این وظیفه را برعهده دارند. کاری که ما می‌خواهیم انجام دهیم، استفاده از مقداری غیر معتبر برای شناسه rel برای مشخص کردن لینک‌هایی‌ست که می‌خواهیم در پنجره جدید باز شود! برای این لینک‌ها شناسه rel را با external مقداردهی می‌کنیم. در نتیجه لینک‌هایی که می‌خواهیم در صفحه جدید باز شود بصورت زیر خواهد بود.

<a href="document.html" target="_blank">external link</a>
از این به بعد:
<a href="document.html" rel="external">external link</a>

پیش از این مرورگرها با دیدن مقدار شناسه target می‌دانستند چگونه باید رفتار کنند اما اکنون مقدار داده شده به شناسه rel برای آنها بی‌مفهوم است. فعلا لینک‌های مورد نظر را با در نظر گرفتن استانداردها نشانه‌گذاری کردیم. حالا با استفاده از جاواسکریپت باید آنها را در صفحات جدید باز کنیم!

وظیفه‌ی اسکریپت ما این است که لینک‌هایی که مقدار شناسه‌ی rel آنها برابر external است را در یک پنجره جدید باز کند! این اسکریپت فقط یک‌بار و در زمانی که load صفحه تمام شد اجرا خواهد شد.
getElementsByTagName یک متد پرکاربرد DOM 1.0 است که توسط تمام مرورگرهای جدید شناخته می‌شود.

[B]var anchor = document.getElementsByTagName('a');[/B]

متغیر anchor آرایه‌ای‌ست که هر المان آن معرف یک تگ <a> در متن است (در واقع این آرایه به تعداد لینک‌های صفحه عنصر خواهد داشت!). اکنون لازم است عناصر آرایه را در جستجوی لینک‌هایی که باید در صفحه‌ی جدید باز شوند پیمایش کنیم.

for (var i="0"; i<anchor.length; i++) {

برای پیدا کردن این لینک‌ها همانطور که پیش از این نشانه‌گذاری شده بودند، باید مقدار شناسه rel آنها برابر external باشد. همچنین چک می‌کنیم که لینک دارای شناسه href (که مسیر لینک را مشخص می‌کند) نیز باشد چراکه همانطور که می‌دانید تگ <a> فقط برای لینک کردن استفاده نمی‌شود و کاربردهای دیگری مانند نشانه‌گذاری (با شناسه name) نیز دارد که نباید کاری به آنها داشته باشیم!

if (anchor[i].getAttribute("href") && anchor[i].getAttribute("rel") == "external")

در نهایت باید مقدار شناسه target لینک‌های مورد نظر را با مقدار blank مقداردهی کنیم:

anchor[i].target = "_blank";

سوالی که اینجا مطرح می‌شود این است که آیا با توجه به اینکه شناسه target از استانداردها حذف شده - و در نتیجه مرورگرها به تدریج دیگر از آن پشتیبانی نخواهند کرد - می‌توان از آن به این شکل سود برد؟ در پاسخ باید بگویم بله! DOM که در واقع آبجکت‌ها و متغیرهای معتبر در جاواسکریپت را مشخص می‌کند کماکان این متغیر را شامل می‌شود.

اسکریپت کامل:
بهتر است پیش از اجرای دستورات چک کنیم که آیا مرورگر از getElementsByTagName پشتیبانی می‌کند یا خیر. اسکریپت کامل به این خواهد بود:

function init() {
   if (!document.getElementsByTagName) return;
   var anchor = document.getElementsByTagName('a'); 
 
   for (var i="0"; i<anchor.length; i++) { 
         if (anchor[i].getAttribute("href") && anchor[i].getAttribute("rel") == "external")
         anchor[i].target = "_blank"; 
    } 
}

در آخر نیز باید این تابع را یکبار و بعد لود شدن صفحه اجرا کنید:

window.onload = init;

مشکل حل شد!

منبع: استاد گرانقدر، آقا کاوه