JavaScript实现全屏显示

最新推荐文章于 2023-07-11 20:56:30 发布

acg4320

最新推荐文章于 2023-07-11 20:56:30 发布

阅读量243

点赞数

文章标签： javascript shell ViewUI

原文链接：http://www.cnblogs.com/Ayinger/p/6722262.html

版权

<!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" οnclick="window.open(document.location, 'big', 'fullscreen=yes')">全屏</button>

转载于:https://www.cnblogs.com/Ayinger/p/6722262.html

acg4320

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现全屏显示

<!doctype html><html><head> <title>全屏显示</title> <meta charset="utf-8" /> <style> div { width: 200px;...
复制链接

扫一扫