js实现各浏览器全屏代码实例


Posted in Javascript onJuly 03, 2018

现代浏览器包括ie11,可以直接用h5的全屏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,其它浏览器,控制按钮的显示、隐藏来实现 适用各浏览器的全屏功能;

Javascript 相关文章推荐
jQuery实现商品活动倒计时
Oct 16 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
微信小程序template模板实例详解
Oct 27 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 #Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 #Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 #Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 #Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 #Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 #Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 #Javascript
You might like
PHP中的类型约束介绍
2015/05/11 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
使用python turtle画高达
2020/01/19 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
店长岗位的工作内容
2013/11/12 职场文书
大学校庆邀请函
2014/01/11 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
学校校庆演讲稿
2014/05/22 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
python异常中else的实例用法
2021/06/15 Python
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记