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

Thomas Steiner

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

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

יש גרסת מקור לניסיון חדשה שזמינה החל מ-Chrome 119 (תאריך יציב): 31 באוקטובר 2023 ל-Chrome 122 (תאריך יציב): 31 באוקטובר 2023 לפתיחת חלונות קופצים במצב מסך מלא בפעולה אחת בלבד. כדי להירשם, לוחצים על Register בדף הנחיתה של גרסת המקור לניסיון של Open popups as full screen 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('.fullscreen-popoup-button-other-screen').addEventListener('click', async (e) => {
  const screenDetails = await window.getScreenDetails();
  ​​const otherScreen = screenDetails.screens.find(s => s !== screenDetails.currentScreen);
  window.open('https://example.com/popup.html', '_blank', `left=${otherScreen.availLeft},` +
      `top=${otherScreen.availTop},` +
      `width=${otherScreen.availWidth},` +
      `height=${otherScreen.availHeight},` +
      `fullscreen`);
});

הדגמה (דמו)

נסו להשתמש בחלונות קופצים במסך מלא בהדגמה כדי להציג את קוד המקור. הקפידו לסמן את תיבת הסימון fullscreen ואת הלחצן Fullscreen הקופץ. אם יש לכם הזדמנות, תוכלו לשחק בהדגמה (דמו) כשמחוברים למכשיר כמה מסכים.

אישורים

המאמר הזה נבדק על ידי בראד טרייבוואסר, האקאן Isbiliroglu, מייק וסרמן וריצ'ל אנדרו.