<!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>
方法三：
<button type="button" id="btn" onclick="window.open(document.location, 'big', 'fullscreen=yes')">全屏</button>