众所周知，IE是个奇葩的浏览器，但是由于用户量很大，开发者还是不得不为IE考虑一下，于是，各种浏览器相关的操作，都要多一个特别的判断——专门针对IE浏览器的判断，这里的全屏也不例外。看代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
function fullScreen() {
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
el.mozRequestFullScreen || el.msRequestFullScreen;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if(typeof window.ActiveXObject != "undefined") {
//for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
var wscript = new ActiveXObject("WScript.Shell");
if(wscript != null) {
wscript.SendKeys("{F11}");
}
}
}function exitFullScreen() {
var el = document;
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
el.mozCancelFullScreen || el.exitFullScreen;
if(typeof cfs != "undefined" && cfs) {
cfs.call(el);
} else if(typeof window.ActiveXObject != "undefined") {
//for IE，这里和fullScreen相同，模拟按下F11键退出全屏
var wscript = new ActiveXObject("WScript.Shell");
if(wscript != null) {
wscript.SendKeys("{F11}");
}
}
} |
下面是个简单的例子（假设上面的代码保存在script.js文件中）：在两个按钮中调用这两个函数即可实现：
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div style="margin-top:50px"> <!-- 设置margin-top是为了查看IE全屏前后的区别 -->
<input type="button" value="FullScreen" onclick="fullScreen()" />
<input type="button" value="ExitFullScreen" onclick="exitFullScreen()" />
</div>
</body>
</html>
|
相关推荐
"js实现浏览器全屏兼容谷歌火狐等"这个主题就涉及到如何使用JavaScript来实现在不同浏览器上实现全屏功能，并确保与主流浏览器如Google Chrome和Mozilla Firefox等的兼容性。这里我们将详细讲解这一技术实现的原理和...
在iPhone的Safari浏览器中实现全屏浏览可以让用户在查看网页内容时获得更沉浸式的体验。通常，Safari浏览器在浏览网页时会显示顶部的工具栏和底部的标签页栏，这占据了屏幕的一部分空间。全屏浏览则可以隐藏这些元素...
HTML5全屏API允许网页或应用在不使用...通过上述知识点，开发者可以实现点击按钮控制浏览器全屏显示，同时对全屏模式下的事件进行监听和样式自定义。这些知识点为实现全屏效果的网页和应用提供了技术基础和实现方法。
### 实现浏览器全屏窗口的几种方法 在日常浏览网页的过程中，我们可能会遇到一种现象：浏览器的工具栏、菜单栏等界面元素消失不见，只留下网页的内容占据整个屏幕空间。这种全屏显示的效果不仅可以带来更加沉浸式的...
在本文中，我们将深入探讨浏览器全屏API、实现方法以及一些注意事项。 首先，浏览器全屏功能主要依赖于HTML5中的Fullscreen API。这个API为元素提供了进入和退出全屏模式的能力。全屏API包含以下核心方法： 1. `...
### Js浏览器全屏代码（模仿按F11） #### 知识点概述 本文将详细介绍如何使用JavaScript实现浏览器全屏功能，类似于用户按下F11键的效果。此方法适用于需要临时进入全屏模式查看某些内容或者进行演示的情况。通过...
在本主题中，我们将深入探讨浏览器全屏API的使用，以及如何通过JavaScript实现全屏功能。我们还将分析提供的三个示例文件：`testauto.html`、`testFullscreen2.html`和`2.html`，它们可能是演示全屏操作的代码实例。...
总结起来，实现JavaScript网页全屏效果主要涉及`Fullscreen API`的使用，包括`requestFullScreen`、`exitFullScreen`等方法以及对应的事件监听。结合jQuery库，我们可以方便地创建一个全屏插件，实现一键全屏切换...
JavaScript控制浏览器全屏功能在现代Web开发中常常用于创建沉浸式体验，如全屏游戏、视频播放或虚拟现实应用。HTML5引入了全屏API，允许开发者通过JavaScript控制元素或整个页面进入和退出全屏模式。然而，由于...
本文将详细介绍如何利用浏览器全屏API来实现JavaScript全屏功能。在实现全屏功能的代码示例中，主要使用了jQuery库。由于库的地址可能因项目部署而异，因此需要开发者将示例中的jQuery库地址替换成自己的。 首先，...
js 特效 html 特效 浏览器全屏显示 js 特效 html 特效 浏览器全屏显示
在Vue.js项目中，实现浏览器全屏展示功能是一项常见的需求，特别是在创建沉浸式用户体验或进行全屏演示时。在本示例中，开发者使用了`sreenfull`这个第三方插件来简化这一过程。以下是关于如何使用`sreenfull`插件在...
可以添加或修改JavaScript代码以调用浏览器的全屏API。例如，使用`requestFullscreen()`方法可以让元素全屏显示。记得处理错误和退出全屏事件。 ```javascript document.getElementById('gameContainer')....
本篇文章将详细讲解如何通过JavaScript（JS）实现这一功能，并介绍四种不同的方法来达到全屏显示的效果。 ### 方法一：使用浏览器API `requestFullScreen` 现代浏览器提供了一个原生的全屏API，允许网页元素请求...
在这个“javascript经典特效---浏览器全屏显示.rar”压缩包中，重点是介绍如何利用JavaScript来实现浏览器的全屏显示功能。全屏显示在现代网页设计中非常常见，比如在线视频播放、游戏或全屏幻灯片展示等场景，能够...
这是单页式全屏，类似考试系统弹窗出来的一样，没有浏览器的收藏、撤销、刷新、前进等操作，只能进行关闭和页面操作。 需要进入页面就执行的小伙伴把代码改为自执行即可，目前为了展示三个方法是点击触发的。
通过上述知识点的学习，我们可以了解到JS实现全屏显示不仅需要掌握基本的API使用方法，还需要注意浏览器的兼容性问题以及安全方面的考虑。正确地使用这些API可以显著提升用户的浏览体验，并为开发者提供更多可能性。
jquery全屏插件，带浏览器智能提醒功能，一键全屏，一键还原。兼容任何项目不占用加载空间
本文将介绍如何使用JavaScript代码实现控制浏览器全屏的功能，并提供相应的代码示例。 首先，我们需要注意的是，不同的浏览器厂商对于全屏API的支持不同，因此在编写实现全屏功能的JavaScript代码时，需要考虑到...