สร้างเว็บวิดเจ็ตลอยตัวด้วย Document Picture-in-Picture API
เรียนรู้วิธีสร้างเว็บวิดเจ็ตลอยตัว เช่น หุ้นแบบเรียลไทม์ หรือรายการสิ่งที่ต้องทำ ด้วย JavaScript และ Document Picture-in-Picture API จากบทความของ CSS-Tricks
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- ใช้ Document Picture-in-Picture API สร้างหน้าต่างลอยตัวสำหรับเว็บวิดเจ็ต
- รองรับการโคลนองค์ประกอบ HTML, CSS และ JavaScript ไปแสดงในหน้าต่างแยก
- ต้องเปิดตัวอย่างในโหมดดีบักเพื่อเลี่ยงข้อจำกัดของ iframe และใช้ Chrome หรือ Firefox
- จัดการหน้าต่างซ้ำด้วยการเขียนโค้ดตรวจสอบและปิดหน้าต่างเดิมอัตโนมัติ
หน้าต่าง Document Picture-in-Picture API หรือที่เรียกสั้นๆ ว่า DPIP ช่วยให้เราสามารถสร้างหน้าต่างลอยตัวบนหน้าจอได้ตลอดเวลา ไม่ว่าจะเป็นการแสดงกราฟิกหุ้นแบบเรียลไทม์ หน้าต่างแชทสด เพลย์ลิสต์เพลง หรือรายการสิ่งที่ต้องทำ โดยตัวหน้าต่างนี้จะบรรจุโค้ด HTML, CSS และ JavaScript เอาไว้ภายใน
บทความจาก CSS-Tricks ได้นำเสนอตัวอย่างการโคลนส่วนแสดงข้อมูลหุ้นจากหน้าเว็บหลักมาไว้ในหน้าต่าง DPIP ซึ่งทำให้เราเห็นประเด็นสำคัญเรื่องการเขียน CSS เฉพาะเจาะจงสำหรับหน้าต่างดังกล่าว รวมถึงข้อควรระวังที่ว่าการดึงคอมโพเนนต์ HTML ออกจากบริบทเดิมอาจทำให้สไตล์ CSS เพี้ยนได้
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
ในด้านการใช้งานจริง นักพัฒนาจำเป็นต้องเปิดตัวอย่างในโหมดดีบัก เนื่องจากฟีเจอร์ Picture-in-Picture ไม่รองรับการทำงานในสภาพแวดล้อมที่ซ้อนกันอย่าง iframe ของ CodePen นอกจากนี้ เบราว์เซอร์ Safari ยังไม่รองรับ DPIP ในขณะนี้ นักพัฒนาจึงต้องใช้งานผ่าน Google Chrome หรือ Firefox เท่านั้น
สำหรับการตรวจสอบการรองรับเบราว์เซอร์ด้วย JavaScript เราไม่สามารถใช้ @supports ร่วมกับ @media (display-mode: picture-in-picture) ได้เนื่องจากฟังก์ชัน at-rule() รองรับเฉพาะใน Chrome เท่านั้น นักพัฒนาจึงต้องเขียนโค้ดตรวจสอบผ่าน JavaScript เพื่อซ่อนหรือปรับเปลี่ยนปุ่มเรียกใช้งานตามความเหมาะสม
การใช้ Document Picture-in-Picture API นับเป็นก้าวสำคัญที่ช่วยปลดล็อกข้อจำกัดของหน้าต่าง Picture-in-Picture แบบเดิมที่มักจำกัดอยู่แค่การเล่นวิดีโอ การเปิดให้รัน HTML และ DOM เต็มรูปแบบทำให้เว็บแอปพลิเคชันสามารถสร้างประสบการณ์ใช้งานที่ยืดหยุ่นขึ้นคล้ายกับเดสก์ท็อปแอปพลิเคชัน แต่อย่างไรก็ตาม นักพัฒนาต้องคำนึงถึงความแตกต่างของการรองรับในแต่ละเบราว์เซอร์และปัญหาเรื่อง CSS Scoping ที่อาจเกิดขึ้นเมื่อย้าย DOM Node ไปยังหน้าต่างใหม่
เมื่อผู้ใช้คลิกปุ่มซ้ำ โค้ดจะทำหน้าที่ปิดหน้าต่าง DPIP ที่เปิดอยู่เดิมโดยอัตโนมัติ ทำให้ปุ่มดังกล่าวทำหน้าที่เป็นปุ่มเปิด-ปิด (Toggle) ในตัว ส่วนการกำหนดค่าหน้าต่าง DPIP สามารถตั้งค่าความกว้างและความสูงได้ โดยต้องกำหนดคู่กันหากต้องการระบุขนาด หรือปล่อยให้เบราว์เซอร์เลือกขนาดอัตโนมัติ นอกจากนี้ยังมีตัวเลือกอย่าง preferInitialWindowPlacement เพื่อป้องกันไม่ให้เบราว์เซอร์จดจำตำแหน่งและขนาดเดิม
ขั้นตอนการโคลนเนื้อหา HTML ทำได้โดยใช้ querySelectorAll() สร้างอาร์เรย์ของ NodeList และใช้ createDocumentFragment() สร้าง DOM tree ก่อนจะวนลูปผ่าน forEach() เพื่อโคลนแต่ละโหนดเข้าสู่เอกสารนอกจอ แล้วผนวกชุดเอกสารทั้งหมดเข้าไปในส่วนหัว
ของหน้าต่าง DPIP ซึ่งช่วยลดการเรนเดอร์ซ้ำ (Reflow) และเพิ่มประสิทธิภาพการทำงานให้ดียิ่งขึ้นที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น