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遍历Json的两种数据结构的实现代码
Jan 19 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
Element实现动态表格的示例代码
Aug 02 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
做个自己站内搜索引擎
2006/10/09 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
python提取页面内url列表的方法
2015/05/25 Python
常见的python正则用法实例讲解
2016/06/21 Python
浅谈django的render函数的参数问题
2018/10/16 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
Python装饰器用法实例分析
2019/01/14 Python
python selenium firefox使用详解
2019/02/26 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
python绘制玫瑰的实现代码
2020/03/02 Python
日语专业推荐信
2013/11/12 职场文书
新农村建设标语
2014/06/24 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
2015选调生工作总结
2015/07/24 职场文书
给校长的建议书范文
2015/09/14 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL