JS实现全屏的四种写法

JS或jQuery实现全屏

JS写法一

.html

<div <button>全屏</button> <button>退出</button> </div>

.css

/* Basic element styles */ html { color: #000; background: paleturquoise; min-height: 100%; } /* Structure */ .container { text-align: center; width: 500px; min-height: 600px; background: #fff; border: 1px solid #ccc; border-top: none; margin: 20px auto; padding: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px 10px #000; -moz-box-shadow: 1px 1px 10px #000; -webkit-box-shadow: 1px 1px 5px #000; } button{ margin: 200px auto; width: 100px; height: 30px; background-color: aliceblue; } /* Fullscreen */ html:-moz-full-screen { background: blue; } html:-webkit-full-screen { background: blue; } html:-ms-fullscreen { background: blue; width: 100%; /* needed to center contents in IE */ } html:fullscreen { background: blue; }

.js

(function () { var viewFullScreen = document.getElementById("full-screen"); if (viewFullScreen) { viewFullScreen.addEventListener("click", function () { var docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.msRequestFullscreen) { docElm.msRequestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, false); } var cancelFullScreen = document.getElementById("exit-fullscreen"); if (cancelFullScreen) { cancelFullScreen.addEventListener("click", function () { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } }, false); } var fullscreenState = document.getElementById("fullscreen-state"); if (fullscreenState) { document.addEventListener("fullscreenchange", function () { fullscreenState.innerHTML = (document.fullscreenElement)? "" : "not "; }, false); document.addEventListener("msfullscreenchange", function () { fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not "; }, false); document.addEventListener("mozfullscreenchange", function () { fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not "; }, false); document.addEventListener("webkitfullscreenchange", function () { fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not "; }, false); } })();

JS写法二

.html

<div> <button>全屏</button> <div > <h1>全屏展示和退出全屏</h1> </div> </div>

.js

document.getElementById("btn").onclick=function(){ var elem = document.getElementById("content"); requestFullScreen(elem); /* 注意这里的样式的设置表示全屏显示之后的样式， 退出全屏后样式还在， 若要回到原来样式，需在退出全屏里把样式还原回去 (见写法三) */ elem.style.height = '800px'; elem.style.width = '1000px'; }; function requestFullScreen(element) { var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; if (requestMethod) { requestMethod.call(element); } else if (typeof window.ActiveXObject !== "undefined") { var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } }

JS写法三

.html

<div> <div > <button>全屏</button> <h1>全屏展示和退出全屏</h1> <button >退出</button> </div> </div>

.js

document.getElementById("btn").onclick=function(){ var elem = document.getElementById("content"); requestFullScreen(elem); /* 注意这里的样式的设置表示全屏显示之后的样式， 退出全屏后样式还在， 若要回到原来样式，需在退出全屏里把样式还原回去 */ elem.style.height = '800px'; elem.style.width = '1000px'; }; document.getElementById("btnn").onclick=function () { exitFullscreen(); }; /* 全屏显示 */ function requestFullScreen(element) { var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; requestMethod.call(element); }; /* 全屏退出 */ function exitFullscreen() { var elem = document; var elemd = document.getElementById("content"); if (elem.webkitCancelFullScreen) { elem.webkitCancelFullScreen(); } else if (elem.mozCancelFullScreen) { elemd.mozCancelFullScreen(); } else if (elem.cancelFullScreen) { elem.cancelFullScreen(); } else if (elem.exitFullscreen) { elem.exitFullscreen(); } else { //浏览器不支持全屏API或已被禁用 }; /* 退出全屏后样式还原 */ elemd.style.height = '500px'; elemd.style.width = '700px' }

jQuery写法四

.html

<div> <button>全屏&退出</button> </div>

.css

.full{ position: fixed; align-content: center; /*top: 10px;*/ /*left: 10px;*/ /* 原来基础的百分百 */ width: 100%; height: 100%; overflow: auto; }

fullScreen.js