js全屏事件fullscreenchange 實(shí)現(xiàn)全屏、退出全屏操作
本文實(shí)例為大家分享了js全屏事件fullscreenchange,實(shí)現(xiàn)全屏、退出全屏操作,供大家參考,具體內(nèi)容如下
1.進(jìn)入全屏
function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen() } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen() } else if (element.msRequestFullscreen) { element.msRequestFullscreen() } else if (element.webkitRequestFullscreen) { element.webkitRequestFullScreen() } } launchFullscreen(document.documentElement) // 整個(gè)頁(yè)面進(jìn)入全屏 launchFullscreen(document.getElementById("id")) //某個(gè)元素進(jìn)入全屏
2.退出全屏
function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen() } else if (document.msExitFullscreen) { document.msExitFullscreen() } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen() } } exitFullscreen()
3.全屏事件
document.addEventListener("fullscreenchange", function (e) { if (document.fullscreenElement) { console.log('進(jìn)入全屏') } else { console.log('退出全屏') } })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用JavaScript實(shí)現(xiàn)檢測(cè)網(wǎng)頁(yè)是否為空閑狀態(tài)
最近開(kāi)發(fā)項(xiàng)目時(shí),常碰到“用戶在一定時(shí)間內(nèi)無(wú)任何操作時(shí),跳轉(zhuǎn)到某個(gè)頁(yè)面”的需求,所以本文就來(lái)使用JavaScript實(shí)現(xiàn)這一要求,需要的可以參考下2024-03-03淺談jQuery異步對(duì)象(XMLHttpRequest)
文章淺顯易懂的將jQuery異步對(duì)象分為了5個(gè)步奏,非常有利于我們學(xué)習(xí)記憶,是篇相當(dāng)不錯(cuò)的學(xué)習(xí)jQuery異步對(duì)象的文章,這里推薦給大家。2014-11-11bootstrap動(dòng)態(tài)調(diào)用select下拉框的實(shí)例代碼
今天小編就為大家分享一篇bootstrap動(dòng)態(tài)調(diào)用select下拉框的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08整理關(guān)于Bootstrap模態(tài)彈出框的慕課筆記
這篇文章主要為大家整理了關(guān)于Bootstrap模態(tài)彈出框的慕課筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03JavaScript中的null和undefined區(qū)別介紹
這篇文章主要介紹了JavaScript中的null和undefined區(qū)別介紹,JavaScript中存在2個(gè)代表信息不存在的特殊值:null和undefined,本文主要講解它們的區(qū)別,需要的朋友可以參考下2015-01-01JavaScript面向?qū)ο罄^承原理與實(shí)現(xiàn)方法分析
這篇文章主要介紹了JavaScript面向?qū)ο罄^承原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析就面向?qū)ο蟪绦蛟O(shè)計(jì)中原形、對(duì)象、繼承的相關(guān)概念、原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2018-08-08sass 中使用 /deep/ 修改 elementUI 組件樣式報(bào)錯(cuò)
這篇文章主要介紹了sass 中使用 /deep/ 修改 elementUI 組件樣式報(bào)錯(cuò)的解決方案,嘗試用 ::v-deep 替換 /deep/ ,成功解決了問(wèn)題,感興趣的朋友跟隨小編一起看看吧2024-02-02bootstrap-table formatter 使用vue組件的方法
Bootstrap table是國(guó)人開(kāi)發(fā)的一款基于 Bootstrap 的 jQuery 表格插件,通過(guò)簡(jiǎn)單的設(shè)置,就可以擁有強(qiáng)大的單選、多選、排序、分頁(yè),以及編輯、導(dǎo)出、過(guò)濾(擴(kuò)展)等等的功能。這篇文章重點(diǎn)給大家介紹bootstrap-table formatter 使用vue組件的方法,感興趣的朋友一起看看2019-05-05