返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js如何模拟F11页面全屏显示
  • 589
分享到

js如何模拟F11页面全屏显示

2024-04-02 19:04:59 589人浏览 安东尼
摘要

这篇文章将为大家详细讲解有关js如何模拟F11页面全屏显示,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下<!DOCTYPE html>

这篇文章将为大家详细讲解有关js如何模拟F11页面全屏显示,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>测试全屏</title>
</head>
<body>
 <button id='btn'>全屏按钮</button> 
<div id="content" >
<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>

关于“js如何模拟F11页面全屏显示”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: js如何模拟F11页面全屏显示

本文链接: https://lsjlt.com/news/68129.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • js如何模拟F11页面全屏显示
    这篇文章将为大家详细讲解有关js如何模拟F11页面全屏显示,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下<!DOCTYPE html> ...
    99+
    2024-04-02
  • 电脑显示屏显示不全如何调整
    这篇“电脑显示屏显示不全如何调整”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“电脑显示屏显示不全如何调整”文章吧。电脑显示屏...
    99+
    2023-07-01
  • win7显示器无法全屏显示如何解决
    如果您的Windows 7计算机无法将显示器调整为全屏显示,以下是一些可能的解决方法: 调整显示器设置:按照以下步骤调整显示器设...
    99+
    2023-10-21
    win7
  • 如何解决虚拟机无法全屏显示的问题
    以下是一些解决虚拟机无法全屏显示的问题的方法: 更新虚拟机软件:确保你使用的虚拟机软件是最新版本,并且已经安装了最新的更新补丁。 安装虚拟机工具:在虚拟机系统中安装虚拟机工具,例如VMware Tools或VirtualBox Gu...
    99+
    2024-06-11
    virtualbox
  • 解决 Android APP 启动页白屏问题及如何实现全屏显示
    目录 一、白屏原因分析 二、解决白屏方案 方案一、提供 .png 背景图 方案二、使用 Layout-list 制作背景 1.  制作替代白屏的背景:bg_splash.xml 2. 将 bg_splash.xml 设为 Window 背景...
    99+
    2023-09-09
    android
  • win10显示无法全屏如何解决
    本文小编为大家详细介绍“win10显示无法全屏如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“win10显示无法全屏如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。win10显示不能全屏解决方法:在...
    99+
    2023-07-01
  • win10录屏显示不全如何解决
    这篇文章主要介绍“win10录屏显示不全如何解决”,在日常操作中,相信很多人在win10录屏显示不全如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”win10录屏显示不全如何解决”的疑惑有所帮助!接下来...
    99+
    2023-07-02
  • Android如何判断页面是否全屏
    Android 想判断 Activity 是否是全屏,网上找了些方法,看到有直接获取 flags 和一个具体的值比较,并没有用,其实分析下来也觉得应该不对。大多都是如何设置全屏和取消...
    99+
    2024-04-02
  • 电脑显示器黑屏显示省电模式如何解决
    这篇文章主要介绍“电脑显示器黑屏显示省电模式如何解决”,在日常操作中,相信很多人在电脑显示器黑屏显示省电模式如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”电脑显示器黑屏显示省电模式如何解决”的疑惑有所...
    99+
    2023-07-01
  • win10高分屏显示模糊如何解决
    要解决Win10高分屏显示模糊的问题,可以尝试以下方法:1. 调整显示设置:右键点击桌面空白处,选择“显示设置”,在“显示分辨率”下...
    99+
    2023-09-08
    win10
  • 思科模拟器如何显示接口
    这篇“思科模拟器如何显示接口”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“思科模拟器如何显示接口”文章吧。思科模拟器显示接口...
    99+
    2023-07-02
  • win7显示器桌面显示不完全如何解决
      win7显示器桌面显示不完全如何解决?有用户使用的win7系统电脑桌面的显示不完全,这个情况是因为我们的电脑显示分辨率不正确,我们需要去调整到正确的分辨率,就可以恢复正常的显示了。很多小伙伴不知道怎么详细操作,小编下面整理了win7显示...
    99+
    2023-07-10
  • vue页面如何切换到滚动页面显示顶部
    这篇文章主要介绍了vue页面如何切换到滚动页面显示顶部,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在用min...
    99+
    2024-04-02
  • pycharm模块显示不全如何解决
    如果在PyCharm中的模块显示不全,可以尝试以下解决方法:1. 打开PyCharm的设置:File -> Settings。2. ...
    99+
    2023-10-12
    pycharm
  • win10界面显示不全如何解决
    本篇内容主要讲解“win10界面显示不全如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“win10界面显示不全如何解决”吧!解决方法:在电脑桌面空白处,鼠标右键点击,选择“显示设置”。 找...
    99+
    2023-07-05
  • vue单页面如何设置高度100%全屏
    目录单页面设置高度100%全屏高度设置100%无效单页面设置高度100%全屏 很多时候我们给单页面设置高度100%永远不会全屏 效果图 高度都是靠内容撑起来的 解决很简单 创建一...
    99+
    2024-04-02
  • JS如何实现页面截屏功能实例代码
    "页面截屏"是前端经常遇到的需求,比如页面生成海报,弹窗图片分享等,因为浏览器没有原生的截图API,所以需要借助canvas来实现导出图片实现需求。 可行性方案 方案1: ...
    99+
    2024-04-02
  • Win7虚拟机远程桌面无法显示全屏需要拖动滚动条
      Win7系统虚拟机进行远程桌面时,常常会无法显示全屏,需要拖动滚动条才可见到桌面底部的程序。就没有什么技巧可以直接显示全屏吗答案是有的。下面为大家介绍具体解决方法。   方法如下:   1、关掉虚拟机,然后重新连接,...
    99+
    2023-06-14
    Win7 虚拟机 远程桌面 全屏 滚动条
  • 电脑屏幕两侧显示不全如何解决
    这篇文章主要讲解了“电脑屏幕两侧显示不全如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“电脑屏幕两侧显示不全如何解决”吧! ...
    99+
    2023-03-02
    电脑
  • 如何设置Windows 8不显示锁屏界面呢
    我们都知道锁屏画面是Windows 8中新增的一项功能。我们可以通过锁屏画面直接看到日期、时间及应用程序最新消息等。 对于我这种喜欢登陆时直接输入密码的用户,那么锁屏界面可能就有点多余了,那么我们如何设置...
    99+
    2022-06-04
    如何设置 界面 Windows
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作