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 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
jQuery中extend函数详解
Jul 13 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 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
PL-880隐藏功能
2021/03/01 无线电
PHP中strtotime函数使用方法分享
2012/01/10 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
CI框架的安全性分析
2016/05/18 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
python代码实现图书管理系统
2020/11/30 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
幼儿园五一活动方案
2014/02/07 职场文书
农村文化建设标语
2014/10/07 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2014年除四害工作总结
2014/12/06 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle