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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
JavaScript中“+=”的应用
Feb 02 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 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/25 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
Python实现多线程下载文件的代码实例
2014/06/01 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
在双python下设置python3为默认的方法
2018/10/31 Python
学python安装的软件总结
2019/10/12 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
经典优秀个人求职自荐信格式
2013/09/25 职场文书
公司董事长职责
2013/12/12 职场文书
临时用工协议书范本
2014/10/29 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
九年级语文教学反思
2016/03/03 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
基于angular实现树形二级表格
2021/10/16 Javascript