JavaScript实现全屏显示
2019-12-12 本文已影响0人
忘了呼吸的那只猫
<!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"></div>
<button type="button" id="btn">全屏</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>
