秋天的落叶随着秋姑娘翩翩起舞；秋天的落叶随着秋的旋律摇荡；秋天的落叶随着秋的微风留下一片光明的大道。秋天让我们来体会 "自古逢秋悲寂寥 "的凄凉；秋天让我们来体会 "无边落木萧萧下 "的哀愁；秋天让我们来体会 "秋空雁度青天远 "的疏朗。
今天有个小功能要写，就是利用 JS 代码来实现浏览器的全屏模式与退出浏览器全屏模式，自己网上也收集过一些相关的代码，分享出来，供大家参考一下。
js 实现浏览器全屏与退出全屏幕的方法
js函数代码：
<script>
//浏览器全屏
function fullScreen() {
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
if (rfs) {
rfs.call(el);
} else if (typeof window.ActiveXObject !== "undefined") {
//IE浏览器，模拟按下F11全屏
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
//浏览器退出全屏
function exitScreen() {
var el = document;
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;
if (cfs) {
cfs.call(el);
} else if (typeof window.ActiveXObject !== "undefined") {
//IE浏览器，模拟按下F11键退出全屏
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
</script>注意：
上面的函数必须要以 html 点击事件来触发，不能直接调用函数，否则会报以下的错误
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture
大概的意思是：函数不能直接调用，要使用事件来触发。
函数事件调用方法：
html 代码：
<button onclick="fullScreen()">全屏</button> <button onclick="exitScreen()">退出全屏</button>
js之切换全屏和退出全屏实现代码实例
如果你感觉上面例子中的代码，有些难懂，可以使用下这个示例中的代码，比较好理解，实现的效果是一样的。
js代码：
<script>
//浏览器全屏
function fullScreen() {
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 (docElm.msRequestFullscreen) {
document.body.msRequestFullscreen();
}
}
//浏览器退出全屏
function exitScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else {
window.parent.showTopBottom();
}
}
</script>调用方法：
<button onclick="fullScreen()">全屏</button> <button onclick="exitScreen()">退出全屏</button>
关于全屏与退出全屏，各个浏览器的事件操作
| 操作 | 浏览器 | 代码 |
|---|---|---|
| 全屏 | W3C | de.requestFullscreen() |
| 全屏 | CHROME | de.webkitRequestFullScreen() |
| 全屏 | FIREFOX | de.mozRequestFullScreen() |
| 全屏 | IE | de.msRequestFullscreen() |
| 还原 | W3C | document.exitFullscreen() |
| 还原 | CHROME | document.webkitCancelFullScreen() |
| 还原 | FIREFOX | document.mozCancelFullScreen() |
| 还原 | IE | document.msExitFullscreen() |
以上就是javascript 如何实现全屏与退出全屏的方法好代码教程。愿我们上半年所有的遗憾，都是下半年惊喜的铺垫，加油吧。更多关于javascript 如何实现全屏与退出全屏的方法好代码教程请关注haodaima.com其它相关文章！
