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.ajax)
Nov 19 Javascript
js确定对象类型方法
Mar 30 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
js实现限定范围拖拽的示例
Oct 26 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
为原生js Array增加each方法
2012/04/07 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
layui实现数据分页功能
2019/07/27 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
对Python中range()函数和list的比较
2018/04/19 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
颐和园导游词
2015/01/30 职场文书
致运动员的广播稿
2015/08/19 职场文书