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中的typeof运算符
Nov 30 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php实现的SESSION类
2014/12/02 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
python+opencv轮廓检测代码解析
2018/01/05 Python
Python实现基于POS算法的区块链
2018/08/07 Python
python迭代器常见用法实例分析
2019/11/22 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
业务部经理岗位职责
2014/01/04 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
新手初学Java网络编程
2021/07/07 Java/Android
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang