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 相关文章推荐
Jquery 获取checkbox的checked问题
Nov 16 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 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实现详细解析
2013/08/24 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
python字符串连接的N种方式总结
2014/09/17 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python3使用requests发闪存的方法
2016/05/11 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python之os操作方法(详解)
2017/06/15 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python与字符编码问题
2019/05/24 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
python调用接口的4种方式代码实例
2019/11/19 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Django admin组件的使用
2020/10/24 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
初级Java程序员面试题
2016/03/03 面试题
施工安全生产承诺书
2014/05/23 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
导游词之西安骊山
2019/12/20 职场文书
PHP实现两种排课方式
2021/06/26 PHP
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫