码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript实现全屏显示

时间:2017-04-17 12:40:19      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:undefined   ndk   asc   模拟   eth   char   .sh   title   ntb   

<!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实现全屏显示

标签:undefined   ndk   asc   模拟   eth   char   .sh   title   ntb   

原文地址:http://www.cnblogs.com/Ayinger/p/6722262.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!