用html5 js實(shí)現(xiàn)點(diǎn)擊一個(gè)按鈕達(dá)到瀏覽器全屏效果
項(xiàng)目中需要將后臺(tái)瀏覽器的窗口全屏,也就是我們點(diǎn)擊一個(gè)按鈕要實(shí)現(xiàn)按F11全屏的效果。 在HTML5中,W3C制定了關(guān)于全屏的API,就可以實(shí)現(xiàn)全屏幕的效果,也可以讓頁(yè)面中的圖片,視頻等全屏目前只有g(shù)oogle chrome 15 +, safri5.1+,firfox10+,IE11支持
全屏
var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } //Chrome等 else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } //IE11 else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); }
退出全屏
if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); }
事件監(jiān)聽
document.addEventListener("fullscreenchange", function () { fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false); document.addEventListener("mozfullscreenchange", function () { fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false); document.addEventListener("webkitfullscreenchange", function () { fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false); document.addEventListener("msfullscreenchange", function () { fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);
全屏樣式設(shè)置
在瀏覽器全屏的使用我們還可以進(jìn)行樣式設(shè)置
html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; } html:fullscreen { background: red; }
附錄
1 一個(gè)在線的Demo
http://robnyman.github.io/fullscreen/
2 HTML5全屏API之網(wǎng)絡(luò)釣魚
3 jquery封裝的全屏插件
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
4 更加詳細(xì)的全屏API介紹
4.1 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
4.2 https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
5 HTML5全屏API在FireFox/Chrome中的顯示差異
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/
相關(guān)文章
簡(jiǎn)單時(shí)間提示DEMO從0開始一直進(jìn)行計(jì)時(shí)
點(diǎn)擊按鈕輸入框會(huì)從0開始一直進(jìn)行計(jì)時(shí),具體的實(shí)現(xiàn)示例如下,感興趣的朋友可以嘗試操作下哦2013-11-11Javascript函數(shù)式編程簡(jiǎn)單介紹
什么是函數(shù)式編程?根據(jù)百度百科的描述,“函數(shù)式編程是種編程典范,它將電腦運(yùn)算視為函數(shù)的計(jì)算。函數(shù)編程語(yǔ)言最重要的基礎(chǔ)是 λ 演算(lambda calculus)。而且λ演算的函數(shù)可以接受函數(shù)當(dāng)作輸入(參數(shù))和輸出(返回值)。”2015-10-10JavaScript ES6中類與模塊化管理超詳細(xì)講解
JavaScript中的模塊化是指將每個(gè)js文件會(huì)被認(rèn)為單獨(dú)一個(gè)的模塊。模塊之間是互相不可見(jiàn)的。如果一個(gè)模塊需要使用另一個(gè)模塊,那么需要通過(guò)指定語(yǔ)法來(lái)引入要使用的模塊,而且只能使用引入模塊所暴露的內(nèi)容2023-01-01javascript實(shí)現(xiàn)二級(jí)級(jí)聯(lián)菜單的簡(jiǎn)單制作
這篇文章主要介紹了javascript實(shí)現(xiàn)二級(jí)級(jí)聯(lián)菜單的簡(jiǎn)單制作,感興趣的小伙伴們可以參考一下2015-11-11js 創(chuàng)建對(duì)象 經(jīng)典模式全面了解
下面小編就為大家?guī)?lái)一篇js 創(chuàng)建對(duì)象 經(jīng)典模式全面了解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法
這篇文章主要介紹了escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法,需要的朋友可以參考下2014-07-07