在 Web 应用程序中,全屏模式使用户能够更好地关注内容,而不被浏览器的界面干扰。Chrome 全屏 API 提供了一种简单的方法来实现全屏体验。
实现全屏模式
要将您的 Web 应用程序设置为全屏模式,请使用 requestFullscreen()
方法。例如,以下代码段将整个文档设置为全屏模式:
----- ------- - ------------------------- -- --------------------------- - ---------------------------- - ---- -- --------------------------------- - -- ------ -- ---------------------------------- - ---- -- ----------------------------- - -- ---- -- ------------------------------ -
退出全屏模式
要退出全屏模式,请使用 exitFullscreen()
方法。例如,以下代码段将整个文档退出全屏模式:
-- ------------------------- - -------------------------- - ---- -- ------------------------------- - -- ------ -- -------------------------------- - ---- -- --------------------------- - -- ---- -- ---------------------------- -
检测全屏模式
您可以使用 fullscreenElement
属性检查文档是否处于全屏模式。如果文档已进入全屏模式,则该属性将返回表示文档的元素。
-- ---------------------------- - -------------------- -------------------------------- -- -- ---------- -------- - ---- - --------------- ------- -- -- ---------- -------- -
监听全屏事件
您可以使用 fullscreenchange
事件在文档进入或退出全屏模式时执行操作。
--------------------------------------------- ------- -- - -- ---------------------------- - -------------------- -------------------------------- ------- ---------- -------- - ---- - ------------------- ---------- -------- - ---
总结
Chrome 全屏 API 是实现全屏体验的简单方法。使用 requestFullscreen()
方法将您的应用程序设置为全屏模式,使用 exitFullscreen()
方法退出全屏模式。检查 fullscreenElement
属性以确定文档是否处于全屏模式,并通过监听 fullscreenchange
事件执行操作。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/13075