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 ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 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
解决File size limit exceeded 错误的方法
2013/06/14 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
React优化子组件render的使用
2019/05/12 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python 的描述符 descriptor详解
2016/02/27 Python
python pygame实现2048游戏
2018/11/20 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python基于SMTP协议发送邮件
2019/05/31 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
境外导游求职信
2014/02/27 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
Python中else的三种使用场景
2021/06/16 Python