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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 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 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php实现的验证码文件类实例
2015/06/18 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
web打印小结
2017/01/11 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
python中文编码问题小结
2014/09/28 Python
进一步理解Python中的函数编程
2015/04/13 Python
python清理子进程机制剖析
2017/11/23 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
详解Python如何生成词云的方法
2018/06/01 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
Python 解析简单的XML数据
2020/07/24 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
新闻专业个人自我评价
2013/09/21 职场文书
八一演出活动方案
2014/02/03 职场文书
计划生育标语
2014/06/23 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
工作岗位职责范本
2015/02/15 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS