דף זה תורגם על ידי Cloud Translation API.

גרסת מקור חדשה לניסיון לחלונות קופצים במסך מלא

Thomas Steiner

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

מחלון האפליקציה הראשי, קוראים ל-method‏ window.open() שדורש מחווה של המשתמש, כמו לחיצה על הלחצן פתיחת חלון קופץ.
מחלון הקופץ, קריאה ל-method‏ Element.requestFullscreen(), שגם היא דורשת תנועת משתמש, כמו לחיצה על הלחצן מעבר למסך מלא.

עכשיו יש גרסת מקור לניסיון חדשה שזמינה מ-Chrome 119 (תאריך יציבות: 31 באוקטובר 2023) עד Chrome 122 (תאריך יציבות: 31 באוקטובר 2023), שמאפשרת לפתוח חלונות קופצים במסך מלא בשלב אחד בלבד. לוחצים על Register בדף הנחיתה של תקופת הניסיון של Open popups as fullscreen windows כדי להירשם. בנוסף לניסיון המקור, אפשר גם לבדוק באופן מקומי על ידי הגדרת הדגל chrome://flags/#fullscreen-popup-windows ל-Enabled.

פתיחת חלונות קופצים במסך מלא במסך הנוכחי

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

document.querySelector('.fullscreen-popoup-button').addEventListener('click', async (e) => {
  if ((await navigator.permissions.query({name: 'window-management'})).state !== 'granted') {
    // Permission not granted. Call `window.getScreenDetails()` to prompt.
    await window.getScreenDetails();
  }
  // Permission granted. Open the fullscreen popup window.
  window.open('https://example.com/popup.html', '_blank', 'popup,fullscreen');
});

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

פתיחת חלונות קופצים במסך מלא במסכים אחרים

התכונה הזו עובדת מצוין בשילוב עם Window Management API, שמאפשר לקבל מידע על כל המסכים שהמשתמש מחבר למחשב. לדוגמה, כדי לפתוח חלון קופץ במסך מלא במסך אחר שאינו המסך הנוכחי של המשתמש, צריך קודם למצוא את המסך השני ואז להעביר את הערכים availLeft,‏ availTop,‏ availWidth ו-availHeight שלו לערכים התואמים left,‏ top,‏ width ו-height של המחרוזת windowFeatures.


document.querySelector(&#39;.fullscreen-popoup-button-other-screen&#39;).addEventListener(&#39;click&#39;, async (e) =&gt; {
  const screenDetails = await window.getScreenDetails();
  const otherScreen = screenDetails.screens.find(s =&gt; s !== screenDetails.currentScreen);
  window.open(&#39;https://example.com/popup.html&#39;, &#39;_blank&#39;, `left=${otherScreen.availLeft},` +
      `top=${otherScreen.availTop},` +
      `width=${otherScreen.availWidth},` +
      `height=${otherScreen.availHeight},` +
      `fullscreen`);
});

הערה: לא צריך להוסיף את popup במחרוזות windowFeatures כאן, כי ההנחה היא שהיא מוגדרת באופן משתמע כשמגדירים את left,‏ top,‏ width או height.

הדגמה (דמו)

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

קישורים רלוונטיים

תודות

הבדיקה של המאמר בוצעה על ידי Brad Triebwasser,‏ Hakan Isbiliroglu,‏ Mike Wasserman ו-Rachel Andrew.