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 相关文章推荐
json 定义
Jun 10 Javascript
json 入门基础教程 推荐
Oct 31 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
模拟xcopy的函数
2006/10/09 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
vue组件创建的三种方式小结
2020/02/03 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
python如何让类支持比较运算
2018/03/20 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
python程序封装为win32服务的方法
2021/03/07 Python
python实现控制COM口的示例
2019/07/03 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
民间借贷协议书范本
2014/10/01 职场文书
朋友聚会开场白
2015/06/01 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记