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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
JS中作用域以及变量范围分析
Jul 18 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
高亮度显示php源代码
2006/10/09 PHP
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
Python生成随机数的方法
2014/01/14 Python
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
python实现logistic分类算法代码
2020/02/28 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
房产协议书范本2014
2014/09/30 职场文书
宾馆安全管理制度
2015/08/06 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书