js如何实现各浏览器全屏

发布时间:2021-04-20 11:08:48 作者:小新
来源:亿速云 阅读:435

这篇文章给大家分享的是有关js如何实现各浏览器全屏的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

现代浏览器包括ie11,可以直接用h6的全屏api实现
低版本的IE需要通过ActiveX插件实现;

//直接上代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <button onclick="fullScreen()">现代浏览器全屏</button>

    <button onclick="exitScreen()">现代浏览器退出</button>

    <button onclick="iefull()">低版本ie全屏</button>
  </body>
  <script src="js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    //全屏
    function fullScreen(){
      var el = document.documentElement;
      var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;   
        if(typeof rfs != "undefined" && rfs) {
          rfs.call(el);
        };
       return;
    }
    //退出全屏
    function exitScreen(){
      if (document.exitFullscreen) { 
        document.exitFullscreen(); 
      } 
      else if (document.mozCancelFullScreen) { 
        document.mozCancelFullScreen(); 
      } 
      else if (document.webkitCancelFullScreen) { 
        document.webkitCancelFullScreen(); 
      } 
      else if (document.msExitFullscreen) { 
        document.msExitFullscreen(); 
      } 
      if(typeof cfs != "undefined" && cfs) {
        cfs.call(el);
      }
    }
    //ie低版本的全屏,退出全屏都这个方法
    function iefull(){
      var el = document.documentElement;
      var rfs = el.msRequestFullScreen;
      if(typeof window.ActiveXObject != "undefined") {
        //这的方法 模拟f11键,使浏览器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if(wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    }
    //注:ie调用ActiveX控件,需要在ie浏览器安全设置里面把 ‘未标记为可安全执行脚本的ActiveX控件初始化并执行脚本' 设置为启用
  </script>
</html>

注:实际应用中,可通过区分ie11 ie10,其它浏览器,控制按钮的显示、隐藏来实现 适用各浏览器的全屏功能;

感谢各位的阅读!关于“js如何实现各浏览器全屏”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. js中各按键的对应值
  2. vue如何实现浏览器全屏展示功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js

上一篇:vue.js如何实现的经典计算器/科学计算器功能

下一篇:SpringBoot+Vue.js怎么实现前后端分离的文件上传功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》