หน้านี้ได้รับการแปลโดย 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 ที่นี่ เนื่องจากระบบจะถือว่ามีอยู่แล้วโดยปริยายเมื่อมีการกําหนด left, top, width หรือ height

สาธิต

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

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

ขอขอบคุณ

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