JS 全屏 - 简书

来源: JS 全屏 – 简书

实现效果

JS实现浏览器全屏

实现方式对比

1、ActiveXObject 只支持IE

2、FullScreen(HTML方法)支持 Chrome 15 / Firefox Nightly / Safari 5.1
备注:方法二 FullScreen JavaScript API 目前仍是草案,实现这个 API,更确切来说是具有这项功能的浏览器有:Chrome 15 / Firefox Nightly / Safari 5.1。
其他方法:flash特性(google关键字 flash 全屏)

代码示例

<html>
<head>
    <script type="text/javascript" language="javascript"> 
  //方法一:ActiveXObject 只支持IE
  //方法二:FullScreen(HTML方法)支持 Chrome 15 / Firefox Nightly / Safari 5.1
  //备注:方法二 FullScreen Javascript API 目前仍是草案,实现这个 API,更确切来说是具有这项功能的浏览器有:Chrome 15 / Firefox Nightly / Safari 5.1。
   
function fullScreen() { 

  var element= document.documentElement; //若要全屏页面中div,var element= document.getElementById("divID");
  //IE 10及以下ActiveXObject
  if (window.ActiveXObject)
  {
    var WsShell = new ActiveXObject('WScript.Shell') 
    WsShell.SendKeys('{F11}'); 
  }
  //HTML W3C 提议
  else if(element.requestFullScreen) {  
    element.requestFullScreen();  
  }
  //IE11
  else if(element.msRequestFullscreen) {  
    element.msRequestFullscreen();  
  }
  // Webkit (works in Safari5.1 and Chrome 15)
  else if(element.webkitRequestFullScreen ) {  
    element.webkitRequestFullScreen();  
  } 
  // Firefox (works in nightly)
  else if(element.mozRequestFullScreen) {  
    element.mozRequestFullScreen();  
  }  
}  

function fullScreenCall() { 

  var el= document.documentElement; //若要全屏页面中div,var element= document.getElementById("divID");

  //切换全屏
  var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
  if (typeof rfs != "undefined" && rfs) {
      rfs.call(el);
  } else if (typeof window.ActiveXObject != "undefined") {
      // for Internet Explorer 
      var wscript = new ActiveXObject("WScript.Shell");
      if (wscript != null) {
          wscript.SendKeys("{F11}");
      }
  }
}  

function fullExit(){
  var element= document.documentElement;//若要全屏页面中div,var element= document.getElementById("divID"); 
  //IE ActiveXObject
  if (window.ActiveXObject)
  {
    var WsShell = new ActiveXObject('WScript.Shell') 
    WsShell.SendKeys('{F11}'); 
  }
  //HTML5 W3C 提议
  else if(element.requestFullScreen) {  
    document.exitFullscreen();
  }
 //IE 11
  else if(element.msRequestFullscreen) {  
    document.msExitFullscreen();
  }
  // Webkit (works in Safari5.1 and Chrome 15)
  else if(element.webkitRequestFullScreen ) {  
    document.webkitCancelFullScreen(); 
  } 
  // Firefox (works in nightly)
  else if(element.mozRequestFullScreen) {  
    document.mozCancelFullScreen();  
  } 
}

function fullExitCall(){
  var cfs = document.exitFullscreen || document.webkitCancelFullScreen || document.msExitFullscreen || document.mozCancelFullScreen;
  if (typeof cfs != "undefined" && cfs) {
      cfs.call(document);
  } else if (typeof window.ActiveXObject != "undefined") {
      var wscript = new ActiveXObject("WScript.Shell");
      if (wscript != null) {
          wscript.SendKeys("{F11}");
      }
  }
}
    </script>

</head>
<body>
    <button id="btnFullScreen" onclick="fullScreen()">
        全屏</button>
    <button id="btnfullExit" onclick="fullExit()">
        退出全屏</button>
</body>
</html>

作者:过桥
链接:https://www.jianshu.com/p/624f808440ae
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏