<div class="key-takeaways"><ul><li>ใช้ Document Picture-in-Picture API สร้างหน้าต่างลอยตัวสำหรับเว็บวิดเจ็ต</li><li>รองรับการโคลนองค์ประกอบ HTML, CSS และ JavaScript ไปแสดงในหน้าต่างแยก</li><li>ต้องเปิดตัวอย่างในโหมดดีบักเพื่อเลี่ยงข้อจำกัดของ iframe และใช้ Chrome หรือ Firefox</li><li>จัดการหน้าต่างซ้ำด้วยการเขียนโค้ดตรวจสอบและปิดหน้าต่างเดิมอัตโนมัติ</li></ul></div><p>หน้าต่าง Document Picture-in-Picture API หรือที่เรียกสั้นๆ ว่า DPIP ช่วยให้เราสามารถสร้างหน้าต่างลอยตัวบนหน้าจอได้ตลอดเวลา ไม่ว่าจะเป็นการแสดงกราฟิกหุ้นแบบเรียลไทม์ หน้าต่างแชทสด เพลย์ลิสต์เพลง หรือรายการสิ่งที่ต้องทำ โดยตัวหน้าต่างนี้จะบรรจุโค้ด HTML, CSS และ JavaScript เอาไว้ภายใน</p><p>บทความจาก CSS-Tricks ได้นำเสนอตัวอย่างการโคลนส่วนแสดงข้อมูลหุ้นจากหน้าเว็บหลักมาไว้ในหน้าต่าง DPIP ซึ่งทำให้เราเห็นประเด็นสำคัญเรื่องการเขียน CSS เฉพาะเจาะจงสำหรับหน้าต่างดังกล่าว รวมถึงข้อควรระวังที่ว่าการดึงคอมโพเนนต์ HTML ออกจากบริบทเดิมอาจทำให้สไตล์ CSS เพี้ยนได้</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/document_picture_in_picture_api_mtbs35f7_inline_1_fafd52ab38.jpg" alt="software developer coding computer screen" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><p>ในด้านการใช้งานจริง นักพัฒนาจำเป็นต้องเปิดตัวอย่างในโหมดดีบัก เนื่องจากฟีเจอร์ Picture-in-Picture ไม่รองรับการทำงานในสภาพแวดล้อมที่ซ้อนกันอย่าง iframe ของ CodePen นอกจากนี้ เบราว์เซอร์ Safari ยังไม่รองรับ DPIP ในขณะนี้ นักพัฒนาจึงต้องใช้งานผ่าน Google Chrome หรือ Firefox เท่านั้น</p><p>สำหรับการตรวจสอบการรองรับเบราว์เซอร์ด้วย JavaScript เราไม่สามารถใช้ @supports ร่วมกับ @media (display-mode: picture-in-picture) ได้เนื่องจากฟังก์ชัน at-rule() รองรับเฉพาะใน Chrome เท่านั้น นักพัฒนาจึงต้องเขียนโค้ดตรวจสอบผ่าน JavaScript เพื่อซ่อนหรือปรับเปลี่ยนปุ่มเรียกใช้งานตามความเหมาะสม</p><div class="ai-insight"><p>การใช้ Document Picture-in-Picture API นับเป็นก้าวสำคัญที่ช่วยปลดล็อกข้อจำกัดของหน้าต่าง Picture-in-Picture แบบเดิมที่มักจำกัดอยู่แค่การเล่นวิดีโอ การเปิดให้รัน HTML และ DOM เต็มรูปแบบทำให้เว็บแอปพลิเคชันสามารถสร้างประสบการณ์ใช้งานที่ยืดหยุ่นขึ้นคล้ายกับเดสก์ท็อปแอปพลิเคชัน แต่อย่างไรก็ตาม นักพัฒนาต้องคำนึงถึงความแตกต่างของการรองรับในแต่ละเบราว์เซอร์และปัญหาเรื่อง CSS Scoping ที่อาจเกิดขึ้นเมื่อย้าย DOM Node ไปยังหน้าต่างใหม่</p></div><p>เมื่อผู้ใช้คลิกปุ่มซ้ำ โค้ดจะทำหน้าที่ปิดหน้าต่าง DPIP ที่เปิดอยู่เดิมโดยอัตโนมัติ ทำให้ปุ่มดังกล่าวทำหน้าที่เป็นปุ่มเปิด-ปิด (Toggle) ในตัว ส่วนการกำหนดค่าหน้าต่าง DPIP สามารถตั้งค่าความกว้างและความสูงได้ โดยต้องกำหนดคู่กันหากต้องการระบุขนาด หรือปล่อยให้เบราว์เซอร์เลือกขนาดอัตโนมัติ นอกจากนี้ยังมีตัวเลือกอย่าง preferInitialWindowPlacement เพื่อป้องกันไม่ให้เบราว์เซอร์จดจำตำแหน่งและขนาดเดิม</p><p>ขั้นตอนการโคลนเนื้อหา HTML ทำได้โดยใช้ querySelectorAll() สร้างอาร์เรย์ของ NodeList และใช้ createDocumentFragment() สร้าง DOM tree ก่อนจะวนลูปผ่าน forEach() เพื่อโคลนแต่ละโหนดเข้าสู่เอกสารนอกจอ แล้วผนวกชุดเอกสารทั้งหมดเข้าไปในส่วนหัว <head> ของหน้าต่าง DPIP ซึ่งช่วยลดการเรนเดอร์ซ้ำ (Reflow) และเพิ่มประสิทธิภาพการทำงานให้ดียิ่งขึ้น</p><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=css-tricks.com&sz=64" alt="CSS-Tricks" class="source-logo" width="16" height="16" /> <a href="https://css-tricks.com/creating-web-widgets-using-the-document-picture-in-picture-api/" target="_blank" rel="noopener noreferrer">CSS-Tricks</a></p>

<div class="key-takeaways"><ul><li>Use the Document Picture-in-Picture API to create floating windows for web widgets</li><li>Support cloning HTML, CSS, and JavaScript elements into separate windows</li><li>Must open demos in debug mode to bypass iframe limitations using Chrome or Firefox</li><li>Manage existing windows by writing toggle logic to close active DPIP windows</li></ul></div><p>Document Picture-in-Picture windows, or DPIP windows, function effectively as floating web widgets. Developers can utilize them for floating stock tickers, live chat conversations, playlists, notes, or spreadsheets—anything that needs to remain visible on the screen at all times by embedding HTML, CSS, and JavaScript inside them.</p><p>An insightful guide by CSS-Tricks explores cloning a stock ticker from the main document into a DPIP window. This approach highlights relevant media queries and pseudo-classes for targeted styling, while serving as a reminder that removing an HTML component from its original context can break its CSS styling.</p><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/document_picture_in_picture_api_mtbs35f7_inline_1_fafd52ab38.jpg" alt="software developer coding computer screen" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><p>For the implementation to function correctly, developers must open the demo in debug mode because picture-in-picture capabilities are unsupported in nested browsing contexts such as CodePen iframes. Furthermore, Safari lacks support for the DPIP API, requiring users to rely on browsers like Chrome or Firefox instead.</p><p>Regarding JavaScript integration, checking browser support requires programmatic verification because feature queries using @supports with @media (display-mode: picture-in-picture) are currently limited since the at-rule() function is only supported by Chrome.</p><div class="ai-insight"><p>The Document Picture-in-Picture API represents a major leap forward by expanding picture-in-picture capabilities beyond simple video elements into fully interactive HTML and DOM content. This empowers web apps to deliver desktop-like floating widget experiences. However, developers must carefully manage cross-browser compatibility gaps and handle CSS scoping issues properly when DOM nodes are transferred across different window contexts.</p></div><p>When handling existing DPIP windows, triggering the creation button a second time closes the active window, effectively turning the button into a toggle control. Options for creating these windows include setting custom width and height parameters together, or letting the browser determine dimensions automatically. Additional configurations include preferInitialWindowPlacement to override saved window positions.</p><p>Cloning HTML content into the DPIP window involves utilizing querySelectorAll() to generate a NodeList array, createDocumentFragment() to build an arbitrary DOM tree, and looping through nodes with forEach(). Appending the entire document fragment directly to the <head> of the DPIP window triggers only a single reflow instead of multiple, resulting in significantly better performance.</p><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=css-tricks.com&sz=64" alt="CSS-Tricks" class="source-logo" width="16" height="16" /> <a href="https://css-tricks.com/creating-web-widgets-using-the-document-picture-in-picture-api/" target="_blank" rel="noopener noreferrer">CSS-Tricks</a></p>

medium_สร้างเว็บวิดเจ็ตลอยตัวด้วย-document-picture-in-picture-api-mtbs35f7.jpg

small_สร้างเว็บวิดเจ็ตลอยตัวด้วย-document-picture-in-picture-api-mtbs35f7.jpg

thumbnail_สร้างเว็บวิดเจ็ตลอยตัวด้วย-document-picture-in-picture-api-mtbs35f7.jpg

สร้างเว็บวิดเจ็ตลอยตัวด้วย-document-picture-in-picture-api-mtbs35f7.jpg

เรียนรู้วิธีสร้างเว็บวิดเจ็ตลอยตัว เช่น หุ้นแบบเรียลไทม์ หรือรายการสิ่งที่ต้องทำ ด้วย JavaScript และ Document Picture-in-Picture API จากบทความของ CSS-Tricks

Learn how to build floating web widgets like live stock tickers and to-do lists using JavaScript and the Document Picture-in-Picture API, featured on CSS-Tricks.

Inewgen

Inewgen

#Document Picture-in-Picture API

Creating Web Widgets Using the Document Picture-in-Picture API

Inewgen