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 相关文章推荐
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
JavaScript正则表达式验证登录实例
Mar 18 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 serialize()与unserialize()的用法
2013/06/05 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python内置函数的用法实例教程
2014/09/08 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python中static相关知识小结
2018/01/02 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
C/C++程序员常见面试题二
2015/11/19 面试题
保安员岗位职责
2013/11/17 职场文书
大学生标准推荐信范文
2013/11/25 职场文书
机电专业求职信
2014/06/14 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
政风行风整改报告
2014/11/06 职场文书
小学运动会通讯稿
2015/07/18 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
图书借阅制度范本
2015/08/06 职场文书
python区块链持久化和命令行接口实现简版
2022/05/25 Python