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 each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
手写实现JS中的new
Nov 07 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
php SQL之where语句生成器
2009/03/24 PHP
PHP内核探索:变量概述
2014/01/30 PHP
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
js获取视频时长代码
2014/04/10 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
python 两个数据库postgresql对比
2019/10/21 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
大学本科生的个人自我评价
2013/12/09 职场文书
政府门卫岗位职责
2014/04/29 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
借款协议书
2014/09/16 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
2016教师节感恩话语
2015/12/09 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
nginx rewrite功能使用场景分析
2022/05/30 Servers