用html5 js實現(xiàn)點擊一個按鈕達到瀏覽器全屏效果
項目中需要將后臺瀏覽器的窗口全屏,也就是我們點擊一個按鈕要實現(xiàn)按F11全屏的效果。 在HTML5中,W3C制定了關(guān)于全屏的API,就可以實現(xiàn)全屏幕的效果,也可以讓頁面中的圖片,視頻等全屏目前只有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è)置
在瀏覽器全屏的使用我們還可以進行樣式設(shè)置
html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; } html:fullscreen { background: red; }
附錄
1 一個在線的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 更加詳細的全屏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)文章
- 什么是函數(shù)式編程?根據(jù)百度百科的描述,“函數(shù)式編程是種編程典范,它將電腦運算視為函數(shù)的計算。函數(shù)編程語言最重要的基礎(chǔ)是 λ 演算(lambda calculus)。而且λ演算的函數(shù)可以接受函數(shù)當作輸入(參數(shù))和輸出(返回值)?!?/div> 2015-10-10
javascript實現(xiàn)二級級聯(lián)菜單的簡單制作
這篇文章主要介紹了javascript實現(xiàn)二級級聯(lián)菜單的簡單制作,感興趣的小伙伴們可以參考一下2015-11-11js 創(chuàng)建對象 經(jīng)典模式全面了解
下面小編就為大家?guī)硪黄猨s 創(chuàng)建對象 經(jīng)典模式全面了解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法
這篇文章主要介紹了escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法,需要的朋友可以參考下2014-07-07最新評論