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