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用data方法获取某个元素上的事件
Jun 23 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python模拟登陆实现代码
2017/06/14 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python3几个常见问题的处理方法
2019/02/26 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
建筑工程管理专业自荐信范文
2013/12/28 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
2014年生产部工作总结
2014/12/17 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
Java无向树分析 实现最小高度树
2022/04/09 Javascript
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
python运算符之与用户交互
2022/04/13 Python