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 面包屑导航 具体实现
Jun 05 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
js实现微信分享代码
Oct 11 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
vue中使用GraphQL的实例代码
Nov 04 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
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
javascript定义函数的方法
2010/12/06 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
详解用python实现简单的遗传算法
2018/01/02 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Python3并发写文件与Python对比
2019/11/20 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
大学生军训自我评价分享
2013/11/09 职场文书
手机业务员岗位职责
2013/12/13 职场文书
公司营业员的自我评价
2014/03/04 职场文书
2014年教师节寄语
2014/08/11 职场文书
防汛工作情况汇报
2014/10/28 职场文书
欠条范文
2015/07/03 职场文书
交通安全温馨提示语
2015/07/14 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书