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 While 循环基础教程
Apr 05 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
Js利用prototype自定义数组方法示例
Oct 20 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 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
Ajax PHP分页演示
2007/01/02 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
layer 关闭指定弹出层的例子
2019/09/25 Javascript
js实现随机点名功能
2020/12/23 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
python时间整形转标准格式的示例分享
2014/02/14 Python
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
keras.layer.input()用法说明
2020/06/16 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
大学毕业生个人自荐信范文
2014/01/08 职场文书
施工协议书范本
2014/04/22 职场文书
党员个人公开承诺书
2014/08/29 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
二手房购房意向书
2015/05/09 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js
python playwrigh框架入门安装使用
2022/07/23 Python