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 相关文章推荐
基于node实现websocket协议
Apr 25 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
jquery拖动改变div大小
Jul 04 jQuery
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
JavaScript监听键盘事件代码实现
Jun 03 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程序中防止盗链
2008/04/09 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
Python生成验证码实例
2014/08/21 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
中科软笔试题和面试题
2014/10/07 面试题
小区门卫工作职责
2013/12/14 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
个人存款证明书
2014/10/18 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书