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 调用WebService实现代码
Mar 24 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
简单了解JavaScript异步
May 23 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
浅谈javascript中return语句
2015/07/15 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
Python实现读取文件最后n行的方法
2017/02/23 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
最新奶茶店创业计划书范文
2014/02/08 职场文书
学校标语大全
2014/06/19 职场文书
文明好少年事迹材料
2014/08/19 职场文书
交通违章检讨书
2014/09/21 职场文书
稽核岗位职责
2015/02/10 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
Python中的 No Module named ***问题及解决
2022/07/23 Python