HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做
全屏API,游戏呀,等都很有用。先看常见的API
1 element.requestFullScreen()
作用:请求某个元素element全屏
2
Document.getElementById(“myCanvas”).requestFullScreen()
这里是将其中的元素ID去请求fullscreen
3
退出全屏
document.cancelFullScreen()
4
Document.fullScreen
如果用户在全屏模式下,则返回true
5 document.fullScreenElement
返回当前处于全屏模式下的元素
下面的代码是开启全屏模式:
- function fullScreen(element) {
- if(element.requestFullScreen) {
- element.requestFullScreen();
- } else if(element.webkitRequestFullScreen ) {
- element.webkitRequestFullScreen();
- } else if(element.mozRequestFullScreen) {
- element.mozRequestFullScreen();
- }
- }
下面的代码就是整个页面调用全屏模式
var html = document.documentElement;
fullScreen(html);
下面的则是对指定元素,比如
var canvas = document.getElementById('mycanvas');
fullScreen(canvas);
如果要取消,同样:
- // the helper function
- function fullScreenCancel() {
- if(document.requestFullScreen) {
- document.requestFullScreen();
- } else if(document .webkitRequestFullScreen ) {
- document.webkitRequestFullScreen();
- } else if(document .mozRequestFullScreen) {
- document.mozRequestFullScreen();
- }
- }
- fullScreenCancel();
不过老实说,FULL SCREEN有个问题,容易造成欺骗,比如在
http://feross.org/html5-fullscreen-api-attack/中,其中就有一个很好的DEMO,
去欺骗了,比如某个链结写的是http://www.bankofamerica.com,大家以为是美国银行,
一点进去,因为使用了全屏幕API,就会欺骗到人
- $('html').on('click keypress', 'a', function(event) {
- // 不响应真正的A HREF点击事件
- event.preventDefault();
- event.stopPropagation();
- // Trigger fullscreen
- if (elementPrototype.requestFullscreen) {
- document.documentElement.requestFullscreen();
- } else if (elementPrototype.webkitRequestFullScreen) {
- document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
- } else if (elementPrototype.mozRequestFullScreen) {
- document.documentElement.mozRequestFullScreen();
- } else {
- //
- }
- //显示假的UI
- $('#menu, #browser').show();
- $('#target-site').show();
- });
详细代码在https://github.com/feross/fullscreen-api-attack可以下载
老外也提到了:
Browser vendors are well aware of the potential security issues with fullscreen. For example, a malicious site could show a full screen Windows or Mac login window and steal a password. That’s why they are disabling keyboard support by default and only enabling by explicitly asking. — John Dyer
相关推荐
"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代码时,需要考虑到...