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 相关文章推荐
html下载本地
Jun 19 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
jquery移动节点实例
Jan 14 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
javascript验证身份证号
Mar 03 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
Vuex 入门教程
Jan 10 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
vue 扩展现有组件的操作
Aug 14 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用mysql数据库存储session的代码
2010/03/05 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
php常用hash加密函数
2014/11/22 PHP
php限制ip地址范围的方法
2015/03/31 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
python学习教程之使用py2exe打包
2017/09/24 Python
解决python "No module named pip" 的问题
2018/10/13 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
老师推荐信
2013/10/28 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
云台山导游词
2015/02/03 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL