JavaScript实现全屏显示
Posted Ayinger
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript实现全屏显示相关的知识，希望对你有一定的参考价值。
<!doctype html> <html> <head> <title>全屏显示</title> <meta charset="utf-8" /> <style> div { width: 200px; height:200px; background:pink; margin:100px auto; } button { margin-left: 650px; } h1 { margin-left: 400px; } </style> </head> <body> <h1>js控制页面的全屏展示和退出全屏显示</h1> <div id="div1">onclick="window.open(document.location, ‘big‘, ‘fullscreen=yes‘)"</div> <button type="button" id="btn" onclick="window.open(document.location, ‘big‘, ‘fullscreen=yes‘)">全屏</button> </body> </html>
方法一：
<script type="text/javascript"> window.onload =function(){ document.getElementById("btn").onclick = function(){ var elem =document.getElementById("div1"); requestFullScreen(elem); } var requestFullScreen=function(element) { //某个元素有请求 var requestMethod =element.requestFullScreen ||element.webkitRequestFullScreen //谷歌 ||element.mozRequestFullScreen //火狐 ||element.msRequestFullScreen; //IE11 if (requestMethod) { requestMethod.call(element); //执行这个请求的方法 } else if (typeof window.ActiveXObject !== "undefined") { //window.ActiveXObject判断是否支持ActiveX控件 //这里其实就是模拟了按下键盘的F11，使浏览器全屏 var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX if (wscript !== null) { //创建成功 wscript.SendKeys("{F11}");//触发f11 } } } } </script>
方法二：
<script>
var btn = document.getElementById("btn");
btn.onclick = function() {
var width = window.screen.width;
var height = window.screen.height;
var elem = document.getElementById("div1");
requestFullScreen(elem);
}
function requestFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
}
//FireFox
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
//Chrome等
else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
//IE11
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
};
</script>
方法三：
<button type="button" id="btn" onclick="window.open(document.location, ‘big‘, ‘fullscreen=yes‘)">全屏</button>
以上是关于JavaScript实现全屏显示的主要内容，如果未能解决你的问题，请参考以下文章
如何在android Fragment中为webview显示全屏加载微调器？