JS 全屏和退出全屏详解及实例代码


Posted in Javascript onNovember 07, 2016

JS 全屏和退出全屏

js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌、火狐、360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏)。

这个demo基本是够了,直接复制下面的源码另存为html文件看效果吧。

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js全屏和退出全屏代码</title>
<body>
<!-- requestFullScreen(document.documentElement): 整个网页进入全屏
  requestFullScreen(document.getElementById("video-box")): 指定某块区域全屏
 -->
<button onclick="requestFullScreen(document.documentElement)">全屏显示</button>
<button onclick="exitFull()">退出全屏</button>
</body>
<script type="text/javascript">
function requestFullScreen(element) {
 // 判断各种浏览器,找到正确的方法
 var requestMethod = element.requestFullScreen || //W3C
 element.webkitRequestFullScreen || //Chrome等
 element.mozRequestFullScreen || //FireFox
 element.msRequestFullScreen; //IE11
 if (requestMethod) {
  requestMethod.call(element);
 }
 else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript !== null) {
   wscript.SendKeys("{F11}");
  }
 }
}

//退出全屏 判断浏览器种类

function exitFull() {
 // 判断各种浏览器,找到正确的方法
 var exitMethod = document.exitFullscreen || //W3C
 document.mozCancelFullScreen || //Chrome等
 document.webkitExitFullscreen || //FireFox
 document.webkitExitFullscreen; //IE11
 if (exitMethod) {
  exitMethod.call(document);
 }
 else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript !== null) {
   wscript.SendKeys("{F11}");
  }
 }
}
</script>
</html>

感谢阅读,希望嫩帮助到大家,谢谢大家对本站的支持!

以下是其它网友的补充

我们知道,浏览器全屏通常按快捷键F11。JS控制浏览器全屏也不稀奇,它让Web应用看上去更像似原生软件应用效果。比如点餐系统、叫号系统等等。

JS让浏览器全屏及退出全屏的方法网上很多,这不是重点,重点是需注意:浏览器全屏只能通过鼠标手势点击事件去触发。

JS全屏方法

var $fullScreen = document.getElementById("js-fullScreen");//按钮 
if ($fullScreen) { 
  $fullScreen.addEventListener("click", function () { 
    var docElm = document.documentElement; 
    if (docElm.requestFullscreen) { 
      docElm.requestFullscreen(); 
    } 
    else if (docElm.msRequestFullscreen) { 
      docElm.msRequestFullscreen(); 
    } 
    else if (docElm.mozRequestFullScreen) { 
      docElm.mozRequestFullScreen(); 
    } 
    else if (docElm.webkitRequestFullScreen) { 
      docElm.webkitRequestFullScreen(); 
    } 
  }, false); 
}

JS退出全屏方法

var $cancelFullScreen = document.getElementById("js-cancelFullScreen"); 
if ($cancelFullScreen) { 
  $cancelFullScreen.addEventListener("click", function () { 
    if (document.exitFullscreen) { 
      document.exitFullscreen(); 
    } 
    else if (document.msExitFullscreen) { 
      document.msExitFullscreen(); 
    } 
    else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
    } 
    else if (document.webkitCancelFullScreen) { 
      document.webkitCancelFullScreen(); 
    } 
  }, false); 
}

控制台警告

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

释义:在"Element"上执行"requestFullscreen"方法失败,javascript API仅允许通过手势去创建!(即没有权限)

通常是由于程序员想触发浏览器自动全屏显示而导致。但是很抱歉,此方法行不通,必须通过手势去创建,哪怕onload、trigger()、mouseover也触发不了!

官方解释

该Element.requestFullscreen()方法发出异步请求,使元素全屏显示。但不能保证元素将被放入全屏模式。

如果允许进入全屏模式,文档将收到一个fullscreenchange事件,让它知道它现在处于全屏模式。如果权限被拒绝,则文档会接收到一个fullscreenerror事件。

结论

可能出于用户操作体验的考虑吧,客户端javascript让浏览器全屏只能通过鼠标手势点击事件去触发,即click()。

Javascript 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
原生JS实现分页
Apr 19 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 #Javascript
vue.js初学入门教程(2)
Nov 07 #Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 #Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 #Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 #Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 #Javascript
AngularJS实现Input格式化的方法
Nov 07 #Javascript
You might like
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
js读取cookie方法总结
2014/10/31 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
Python实现把类当做字典来访问
2019/12/16 Python
iPython pylab模式启动方式
2020/04/24 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
《影子》教学反思
2014/02/21 职场文书
初中英语演讲稿
2014/04/29 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
检讨书范文
2015/01/27 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android