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 相关文章推荐
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
js表数据排序 sort table data
Feb 18 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
实例分析javascript中的异步
Jun 02 Javascript
bootstrap实现tab选项卡切换
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
一个捕获函数输出的函数
2007/02/14 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP分享图片的生成方法
2018/04/25 PHP
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
什么是Assembly(程序集)
2014/09/14 面试题
大学生涯自我鉴定
2014/01/16 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书