js模拟F11页面全屏显示


Posted in Javascript onSeptember 17, 2019

本文实例为大家分享了js模拟F11页面全屏显示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>测试全屏</title>
</head>
<body>
 <button id='btn'>全屏按钮</button> 
<div id="content" style="background:yellow;width:500px;height:500px;">
<div id="quite" class="btn">退出全屏</div> 
</div>
 <script type="text/javascript">

var btn = document.getElementById('btn'); 
  var content = document.getElementById('content'); 
  btn.onclick = function(){ 
   console.log(content);
fullScreen(content); 
  }
  var quite = document.getElementById('quite'); 
  quite.onclick = function(){
   exitFullScreen(); 
  }

function fullScreen(el) {
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen, 
wscript; 
 
if(typeof rfs != "undefined" && rfs) {
rfs.call(el); 
return; 
} 
 
if(typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell"); 
if(wscript) { 
wscript.SendKeys("{F11}"); 
}
}
}
 
function exitFullScreen(el) {
var el= document, 
cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen, 
wscript; 
 
if (typeof cfs != "undefined" && cfs) {
 cfs.call(el); 
 return; 
}
 
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell"); 
if (wscript != null) { 
wscript.SendKeys("{F11}"); 
}
}
}
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 #Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 #Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 #Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 #Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 #Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 #Javascript
小程序的上传文件接口的注意要点解析
Sep 17 #Javascript
You might like
PHP的面试题集
2006/11/19 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
PHP中16个高危函数整理
2019/09/19 PHP
JavaScript 事件系统
2010/07/22 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
浅谈JavaScript闭包
2019/04/09 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
python修改操作系统时间的方法
2015/05/18 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
小学一年级评语大全
2014/04/22 职场文书
环境科学专业求职信
2014/08/04 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
离婚被告答辩状
2015/05/22 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
canvas 中如何实现物体的框选
2022/08/05 Javascript