html5 js 實現瀏覽器全屏效果(F11)
阿新 • • 發佈:2019-02-07
最近專案中需要瀏覽器全屏的效果、我查了很多資料、終於、找到了一段程式碼、說是能相容google chrome 15 +, safri5.1+,firfox10+,IE11支援 、我只試驗了火狐可以、360、以及IE8是沒有成功滴、下面給大家發下程式碼、複製到HTML的頁面就可以實現啦!
<input id="Button1" type="button" value="開始全屏" onclick="kaishi()" /> <input id="Button2" type="button" value="關閉全屏" onclick="guanbi()" /> <script> function kaishi() { 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(); } } function guanbi() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } 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); </script>
最近做專案忙死了……………………
————————————————————chenchen好久沒冒泡了——————————————————————