js模拟F11页面全屏显示

2024-12-19 21:19:22

本文实例为大家分享了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 full screen 全屏显示页面元素的方法

一种最简单的方式,就是动态改变你想要全屏显示的部件的style,例如position变成absolute,height和width都设置成窗口大小,并且把背景颜色改成全白(为了遮住页面上其余的元素).这样网页上就只能看到你要突出的部件了,视觉上就等同于全屏.同时利用javascript监听键盘事件,一旦用户按了ESc退出键,就恢复原来的样子.部分代码如下: 复制代码代码如下: document.onkeydown = function (event) { var e = even
js全屏显示显示代码的三种方法

第一种: 在已经打开的一个普通网页上,点击"全屏显示",然后进入该网页对应的全屏模式.方法为:在网页的<body>与</body>之间加入以下代码: 复制代码代码如下: <form><input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location,
js控制页面的全屏展示和退出全屏显示的方法

本文实例讲述了js控制页面的全屏展示和退出全屏显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <div style="margin:0 auto;heig
JavaScript控制浏览器全屏显示简单示例

本文实例讲述了JavaScript控制浏览器全屏显示.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <
JS实现指定区域的全屏显示功能示例

本文实例讲述了JS实现指定区域的全屏显示功能.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net js指定区域全屏</title> <style> #fulldiv { background: #fff; w
js模拟F11页面全屏显示

本文实例为大家分享了js模拟F11页面全屏显示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试全屏</title> </head> <body> <button id='btn'>全屏按钮</button> <
js实现简单页面全屏

本文实例为大家分享了js实现简单页面全屏,供大家参考,具体内容如下全屏效果为传入div元素全屏: 代码块 <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <div style="margin:0 auto;height:600px;width:700px;"> <butto
Openlayers实现地图全屏显示

本文实例为大家分享了Openlayers实现地图全屏显示的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建一个div标签,用来作为地图加载的容器: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"
IE：如何做到全屏显示

我们用IE等浏览器打开一个网页时,会发现菜单栏.工具栏.状态栏几乎占去了几乎一半的空间,真正用于显示网页的空间极为有限.虽然现在的好多显示器都是15寸的了,但是14寸的显示器还占有相当一部分比例.这种情况下,网页的全屏显示就显得尤其重要了. 全屏显示的方法即为简单.启动IE5后,点击"查看"菜单,点击"全屏"命令就可以了.或者直接按快捷键盘F11,也可以达到一样的效果. 如果要恢复以前的设置,只要点击可上角的"还原"按钮就可以了. 怎么样,试试看
Android App实现闪屏页广告图的全屏显示实例

目录 1. 适配长屏幕的全面屏 2. 适配刘海屏或者水滴屏凹形屏幕的显示模式 1. 适配长屏幕的全面屏至于全屏展示,就得做适配工作,有以下两种方式可进行适配: 在 Android 8.0(API 26)及更高版本中,我们可以在标签中使用 android:MaxAspectRatio 来声明其支持的屏幕最大宽高比. 比如我们可以声明最大宽高比为 2.4:  <
C#中让控件全屏显示的实现代码（WinForm）

1.使用winapi "SetParent" 接口: 复制代码代码如下: [DllImport("user32.dll", SetLastError = true)] static extern IntPtr SetParent(IntPtr hWndChild, IntPtr hWndNewParent); 复制代码代码如下: control.Dock = DockStyle.None; control.Left = 0; control.Top = 0; c

js模拟F11页面全屏显示

相关推荐

随机推荐