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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
js onclick事件传参讲解
Nov 06 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
JavaScript回调函数callback用法解析
Jan 14 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
python中p-value的实现方式
2019/12/16 Python
python 类之间的参数传递方式
2019/12/20 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
内勤主管岗位职责
2014/04/03 职场文书
企业安全生产规章制度
2015/08/06 职场文书
八年级语文教学反思
2016/03/03 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS