หน้านี้ได้รับการแปลโดย Cloud Translation API

ช่วงทดลองใช้จากต้นทางใหม่สำหรับหน้าต่างป๊อปอัปแบบเต็มหน้าจอ

Thomas Steiner

สมมติว่าคุณต้องการเปิดหน้าต่างป๊อปอัปในโหมดเต็มหน้าจอ ก่อนหน้านี้การเปิดหน้าต่างป๊อปอัปแบบเต็มหน้าจอประกอบด้วย 2 ขั้นตอน ดังนี้

จากหน้าต่างแอปหลัก การเรียกใช้เมธอด window.open() ที่ต้องใช้ท่าทางสัมผัสของผู้ใช้ เช่น การคลิกปุ่มเปิดหน้าต่างป๊อปอัป
จากหน้าต่างป๊อปอัป ให้เรียกใช้เมธอด Element.requestFullscreen() ซึ่งก็ต้องใช้ท่าทางสัมผัสของผู้ใช้เช่นกัน เช่น การคลิกปุ่มเข้าสู่โหมดเต็มหน้าจอ

ตอนนี้มีช่วงทดลองใช้เวอร์ชันต้นทางใหม่พร้อมให้ใช้งานแล้วใน Chrome 119 (วันที่เผยแพร่เวอร์ชันเสถียร): 31 ตุลาคม 2023 ถึง Chrome 122 (วันที่เผยแพร่เวอร์ชันเสถียร): 31 ตุลาคม 2023 สำหรับการเปิดหน้าต่างป๊อปอัปในโหมดเต็มหน้าจอด้วยขั้นตอนเดียว คลิกลงทะเบียนในหน้า Landing Page ของช่วงทดลองใช้ Origin เพื่อลงชื่อสมัครใช้เปิดป๊อปอัปเป็นหน้าต่างแบบเต็มหน้าจอ นอกจากการทดลองใช้ต้นทางแล้ว คุณยังทดสอบในเครื่องได้ด้วย โดยตั้งค่า Flag chrome://flags/#fullscreen-popup-windows เป็นเปิดใช้

การเปิดหน้าต่างป๊อปอัปแบบเต็มหน้าจอในหน้าจอปัจจุบัน

ฟีเจอร์ใหม่นี้อยู่ภายใต้สิทธิ์ 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 เพื่อเปิดในหน้าต่างป๊อปอัป พารามิเตอร์ที่ 2 คือ target ซึ่งมีค่าพิเศษเป็น _blank พารามิเตอร์ที่ 3 สำหรับ 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 ที่นี่ เนื่องจากระบบจะถือว่ามี popup โดยปริยายเมื่อมีการกําหนด left, top, width หรือ height

สาธิต

ลองใช้หน้าต่างป๊อปอัปแบบเต็มหน้าจอในเดโม และดูซอร์สโค้ด อย่าลืมเลือกช่องทำเครื่องหมายแบบเต็มหน้าจอและปุ่มป๊อปอัปแบบเต็มหน้าจอ และหากมีโอกาส ให้ลองใช้เดโมด้วยหน้าจอหลายจอที่ต่ออยู่กับอุปกรณ์

ลิงก์ที่เกี่ยวข้อง

ขอขอบคุณ

บทความนี้ได้รับการตรวจสอบโดย Brad Triebwasser, Hakan Isbiliroglu, Mike Wasserman และ Rachel Andrew