HTML target _blank: פתיחת קישור בלשונית חדשה

Q: איך גורמים לקישור להיפתח בלשונית חדשה ב-HTML?

הוסיפו target="blank" לתגית : Example . הדפדפן פותח את העמוד בלשונית חדשה ומשאיר את העמוד הנוכחי פתוח.

Q: האם עדיין צריך rel="noopener" עם target="_blank"?

הגרסאות הנוכחיות של Chrome, Firefox ו-Safari מחילות noopener על קישורי target="_blank" אוטומטית, כך שהעמוד החדש לא יכול להגיע חזרה לעמוד שלכם דרך window.opener. כתיבת rel="noopener" לא עולה כלום ומגינה על מבקרים בדפדפנים ישנים, ולכן רוב מדריכי הסגנון עדיין דורשים אותו.

Q: מה ההבדל בין noopener ל-noreferrer?

noopener מנתק את הקשר בין שתי הלשוניות (window.opener הוא null בלשונית החדשה). noreferrer עושה את זה וגם מונע מהדפדפן לשלוח את ה-URL של העמוד שלכם כ-referrer, כך שהאנליטיקס של האתר השני רואה את הביקור כישיר.

Q: האם HTML יכול לכפות על קישור להיפתח בחלון חדש במקום בלשונית?

לא. target="_blank" מבקש הקשר גלישה חדש, והדפדפן וההגדרות של המשתמש מחליטים אם זו לשונית או חלון. דפדפנים של היום פותחים לשונית.

Q: איך פותחים את כל הקישורים בעמוד בלשונית חדשה?

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

פתיחת קישור בלשונית חדשה עם target="_blank"

הוסיפו target="_blank" לקישור. הדפדפן פותח את היעד בלשונית חדשה ומשאיר את העמוד שלכם במקומו.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab</title>
</head>
<body>
  <p>
    <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
      MDN web docs
    </a>
    opens in a new tab.
  </p>
</body>
</html>

זו כל הטכניקה: target="_blank" על ה-<a>, ועוד rel="noopener", שמוסבר מיד. קוראים יכולים גם לפתוח כל קישור בלשונית חדשה בעצמם עם Ctrl+לחיצה (Cmd+לחיצה ב-Mac) או לחיצה אמצעית, אז השתמשו ב-target="_blank" רק כשיציאה מהעמוד תעלה להם משהו, כמו טופס שמולא עד חציו או וידאו שמתנגן.

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

rel="noopener" ו-rel="noreferrer"

עמוד שנפתח עם target="_blank" היה מקבל פעם הפניה חזרה לעמוד שלכם ב-window.opener, ויכול היה להשתמש בה כדי לשלוח את הלשונית שלכם ל-URL אחר (למשל עמוד התחברות מזויף). rel="noopener" מסיר את ההפניה הזו.

ערך `rel`	`window.opener` בלשונית החדשה	referrer נשלח לאתר החדש
אין (דפדפנים ישנים)	העמוד שלכם	כן
אין (דפדפנים של היום)	`null`	כן
`noopener`	`null`	כן
`noreferrer`	`null`	לא
`opener`	העמוד שלכם	כן

הגרסאות הנוכחיות של Chrome, Firefox ו-Safari מתייחסות לכל קישור target="_blank" כ-noopener, אלא אם כותבים rel="opener". לכתוב rel="noopener" בכל זאת מגן על מבקרים בדפדפנים ישנים ומבהיר את הכוונה בקוד.

noreferrer גם מונע מהדפדפן לשלוח את ה-referrer, כך שהאתר שאליו אתם מקשרים לא רואה מאיזה עמוד המבקר הגיע. זו בחירה של פרטיות, לא של אבטחה: השתמשו בה כשה-URL שלכם צריך להישאר פרטי, והשמיטו אותה אצל שותפים שצריכים לראות את התנועה שלכם.

<!-- Safe, the other site still sees the referral -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Safe, and the other site does not see where the visit came from -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

rel מקבל כמה ערכים מופרדים ברווחים, כך ש-noopener משתלב עם ערכי SEO: rel="noopener sponsored" לקישור ממומן, rel="noopener nofollow" לקישור שאתם לא ערבים לו.

להודיע למשתמשים שהקישור נפתח בלשונית חדשה

לשונית חדשה שנפתחת בלי אזהרה מבלבלת, במיוחד משתמשי קוראי מסך, שעלולים לא לשים לב שהעמוד השתנה. אמרו את זה בקישור. אייקון קטן מראה את זה למשתמשים רואים; טקסט מוסתר אומר את זה למשתמשי קוראי מסך:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab hint</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    a[target="_blank"]::after {
      content: " \2197";
      font-size: 0.85em;
    }
  </style>
</head>
<body>
  <p>
    Read the
    <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
      accessibility guidelines<span class="visually-hidden"> (opens in a new tab)</span></a>
    before you start.
  </p>
</body>
</html>

הסלקטור a[target="_blank"] מוסיף את החץ לכל קישור שנפתח בלשונית חדשה אוטומטית, כך שאף פעם לא שוכחים אחד. ה-span המוסתר מוקרא כחלק משם הקישור, "accessibility guidelines (opens in a new tab)", אבל לא תופס מקום על המסך.

סימון אוטומטי של כל קישור חיצוני

סלקטורים של מאפיינים יכולים לעצב קישורים לפי ה-href שלהם. כאן כל קישור שמתחיל ב-http מקבל את החץ, וקישורים בתוך האתר לא:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    a[href^="http"]::after {
      content: " \2197";
      color: #2563eb;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/pricing">Pricing</a> (same site)</li>
    <li><a href="/docs">Docs</a> (same site)</li>
    <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
  </ul>
</body>
</html>

^= פירושו "מתחיל ב". הסלקטור רק מעצב את הקישורים: המאפיינים target ו-rel עדיין צריכים להיות ב-HTML.

ערכי target

target קובע איפה הקישור נפתח. יש ארבע מילות מפתח, וכל ערך אחר הוא שם:

`target`	פותח את הקישור ב
`_self`	אותה לשונית או מסגרת. זו ברירת המחדל.
`_blank`	לשונית חדשה בלי שם
`_parent`	ההורה של המסגרת הנוכחית (כמו `_self` מחוץ למסגרות)
`_top`	כל הלשונית, תוך יציאה מכל המסגרות
כל שם, למשל `help`	הלשונית או המסגרת עם השם הזה, שנוצרת אם היא לא קיימת

יעד עם שם נמצא בשימוש חוזר. כל קישור עם target="help" נפתח באותה לשונית, כך שקורא שלוחץ על חמישה קישורי עזרה מקבל לשונית אחת, לא חמש. _top הוא הערך לשימוש בתוך <iframe> כשקישור צריך להחליף את כל העמוד ולא רק את המסגרת.

פתיחת כל הקישורים בלשונית חדשה עם האלמנט base

<base target="_blank"> ב-<head> קובע את יעד ברירת המחדל לכל קישור וטופס בעמוד:

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://example.com">Opens in a new tab</a>
  <a href="/about" target="_self">Opens in this tab</a>
</body>

ה-target של הקישור עצמו גובר על <base>. השתמשו בזה לעיתים רחוקות: עמוד שבו כל קישור פותח לשונית חדשה מעצבן לשימוש.

פתיחת לשונית חדשה מ-JavaScript

window.open(url, '_blank') פותח לשונית מסקריפט. העבירו 'noopener' כארגומנט השלישי לאותה הגנה כמו המאפיין rel. איתו, window.open מחזיר null במקום הפניה ללשונית החדשה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>window.open</title>
</head>
<body>
  <button type="button" id="open">Open example.com</button>
  <p id="out"></p>

  <script>
    document.querySelector('#open').addEventListener('click', () => {
      const win = window.open('https://example.com/', '_blank', 'noopener');
      document.querySelector('#out').textContent = 'window.open returned: ' + win;
    });
  </script>
</body>
</html>

דפדפנים חוסמים את window.open אלא אם הוא רץ בתגובה ללחיצה או להקשה על מקש, אז קראו לו מתוך event listener, לא בטעינת העמוד או אחרי טיימר. אם היעד הוא URL שהקורא יכול לראות מראש, קישור עם target="_blank" פשוט יותר ועובד בלי JavaScript. הקישור עצמו מוסבר ב-HTML anchor tag.

טעויות נפוצות

target="blank" בלי הקו התחתון. זה שם, לא מילת המפתח. הוא עדיין פותח לשונית חדשה בפעם הראשונה, ואז משתמש שוב באותה לשונית לכל קישור אחר עם אותו שם.
target="_new". גם זה סתם שם, עם אותה השפעה: לשונית אחת שנמצאת בשימוש חוזר.
לשים target על כל קישור. קישורים פנימיים צריכים להיפתח באותה לשונית. קוראים שרוצים לשונית חדשה יודעים איך לקבל אחת.
שום סימן לכך שקישור נפתח בלשונית חדשה. הוסיפו אייקון וטקסט מוסתר.
הוספת noreferrer לקישורי שותפים או לקישורי affiliate, ואז לתהות למה השותף לא רואה הפניות.

שאלות נפוצות

איך גורמים לקישור להיפתח בלשונית חדשה ב-HTML?

הוסיפו target="_blank" לתגית <a>: <a href="https://example.com" target="_blank" rel="noopener">Example</a>. הדפדפן פותח את העמוד בלשונית חדשה ומשאיר את העמוד הנוכחי פתוח.

האם עדיין צריך rel="noopener" עם target="_blank"?

הגרסאות הנוכחיות של Chrome, Firefox ו-Safari מחילות noopener על קישורי target="_blank" אוטומטית, כך שהעמוד החדש לא יכול להגיע חזרה לעמוד שלכם דרך window.opener. כתיבת rel="noopener" לא עולה כלום ומגינה על מבקרים בדפדפנים ישנים, ולכן רוב מדריכי הסגנון עדיין דורשים אותו.

מה ההבדל בין noopener ל-noreferrer?

noopener מנתק את הקשר בין שתי הלשוניות (window.opener הוא null בלשונית החדשה). noreferrer עושה את זה וגם מונע מהדפדפן לשלוח את ה-URL של העמוד שלכם כ-referrer, כך שהאנליטיקס של האתר השני רואה את הביקור כישיר.

האם HTML יכול לכפות על קישור להיפתח בחלון חדש במקום בלשונית?

לא. target="_blank" מבקש הקשר גלישה חדש, והדפדפן וההגדרות של המשתמש מחליטים אם זו לשונית או חלון. דפדפנים של היום פותחים לשונית.

איך פותחים את כל הקישורים בעמוד בלשונית חדשה?

שימו <base target="_blank"> ב-<head>. כל קישור בלי target משלו נפתח אז בלשונית חדשה. זה משפיע גם על טפסים, אז השתמשו בזה רק בעמודים שבהם זה באמת מה שאתם רוצים.

מושגים קשורים