脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js模拟F11页面全屏显示

js模拟F11页面全屏显示

 更新时间：2019年09月17日 15:10:38   作者：江边的锋  
这篇文章主要为大家详细介绍了js模拟实现F11使页面全屏显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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事件冒泡,事件捕获和事件委托详解

    这篇文章主要介绍了javaScript 事件冒泡,事件捕获和事件委托的相关资料,需要的朋友可以参考下，希望能够给你带来帮助
    2021-11-11
  • axios概念介绍和基本使用

    axios概念介绍和基本使用

    axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,下面这篇文章主要给大家介绍了关于axios概念介绍和基本使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • javascript textContent与innerText的异同分析

    javascript textContent与innerText的异同分析

    因为发现网络上很少有这方面的内容，因此就把自己私有blog上的这篇文章搬出来到Boluor的公开blog，方便其它人查阅。
    2010-10-10
  • js定时器怎么写？就是在特定时间执行某段程序

    js定时器怎么写？就是在特定时间执行某段程序

    定时器想必大家并不陌生吧，在本文为大家详细介绍下js中是如何实现定时器的，具体原理及代码如下，感兴趣的朋友不要错过
    2013-10-10
  • 详解JavaScript中的六种错误类型

    详解JavaScript中的六种错误类型

    本文给大家详细介绍了JavaScript中的六种错误类型,需要的朋友可以参考下
    2017-09-09
  • javascript基于DOM实现省市级联下拉框的方法

    javascript基于DOM实现省市级联下拉框的方法

    这篇文章主要介绍了javascript基于DOM实现省市级联下拉框的方法,可实现选择省份后出现对应城市下拉框选项的功能,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • JavaScript获取标签的几种方式小结

    JavaScript获取标签的几种方式小结

    本文主要介绍了JavaScript获取标签的几种方式小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • 原生javascript实现文件异步上传的实例讲解

    原生javascript实现文件异步上传的实例讲解

    下面小编就为大家带来一篇原生javascript实现文件异步上传的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 结合 ES6 类编写JavaScript 创建型模式

    结合 ES6 类编写JavaScript 创建型模式

    这篇文章主要介绍了结合ES6类编写JavaScript创建型模式，本文开始系统性的对20多种JavaScript 设计模式进行简单概述，然后结合ES6类的方式来编写实例代码展示其使用方式，需要的朋友可以参考一下
    2022-07-07
  • 详解TypeScript中枚举的使用

    详解TypeScript中枚举的使用

    枚举是 TypeScript 中一个非常有趣且实用的特性，它可以让我们更好地组织和管理代码，下面就来和大家聊聊TypeScript中枚举的具体使用吧
    2023-06-06

最新评论