פתח קישור בחלון חדש שתואם לתקן XHTML Strict

כן, כל מפתח מכיר את target=_blank. אך הוא אינו עובר את בדיקת הוולדיציה של תקן XHTML Strict. במאמר זה מוצג הפתרוןץ

מי שכותב בהתאם לתקן XHTML, בוודאי יודע ש-XHTML Strict אוסר על target="_blank", השיטה המוכרת והיעילה לפתיחת קישור בחלון חדש. למרות שג'ייקוב נילסן כלל את פתיחת חלון חדש בלחיצה על קישור חיצוני כטעות שימושית נפוצה ומעצבנת, מהנסיון שלי הרבה מאד משתמשים שלוחצים על קישור חדש לא רוצים שהוא ייפתח בחלון המקורי, במיוחד אם מדובר בקישורים בתוך מאמרים ארוכים.

כיוון שיש מחלוקות, אנשי W3C נקטו עמדה וקבעו את סוף עידן ה-target=_lank. מי שמשתמש בתגית זו יודע שהוא ייכשל במבחן הוולידיות של ה-W3C. אנשי ה-W3C קבעו שהתגית שתחליף את ה-target=_blank היא rel=external אך למרבה הצער לתגית אין אותה פונקציונליות שיש ל target. כשאני מכליל rel=external בקישור שום דפדפן לא יפתח חלון חדש.

מה לעשות שיש עדיין צורך ודרישה לפתיחת חלון חדש בלחיצה על קישור?

הפתרון הוא די אלגנטי, הכניסו את ה-rel=external והפעילו את קוד ה-JavaScript הלא פולשני הבא בתוך ה-Head:


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

הקוד הזה הוא לא מאד אלגנטי ולא מאד נכון מבחינת קונספציה, אבל הוא עובד. יום יבוא ואכתוב קוד שלא יחליף את ה-rel=external ל-target אלא פשוט יתן את הפונקציונליות של פתיחת חלון לקישורים עם rel=external.

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

SSG עם next

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

פתרונות ומאמרים על פיתוח אינטרנט

נגישות טכנית – פודקאסט ומבוא

פרק בפודקאסטעל נגישות בעברית שצולל לכלים האוטומטיים ולפן המאד מאד טכני של הנגישות.

פיתוח ב-JavaScript

Axios interceptors

תכנון נכון של קריאות AJAX באפליקציה ריאקטית וניהול השגיאות או ההצלחות עם פיצ׳ר נחמד של axios

גלילה לראש העמוד