`
wangemperor
  • 浏览: 39805 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

js实现浏览器全屏 F11全屏

 
阅读更多

浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀,相信下面这段代码需要你花大量的搜索才能凑齐:

代码如下:

// 判断各种浏览器,找到正确的方法
function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素

 

对你想要全屏显示的页面元素调用全屏方法,浏览器窗口就会变成全屏,但会先请求用户允许全屏模式。要注意,用户很有可能会拒绝全屏模式。如果用户运行全屏模式,则浏览器的工具条等按钮菜单都会隐藏,你的页面会覆盖整个屏幕。

退出全屏模式

这个exitFullscreen方法(也需要加浏览器前缀)会让浏览器退出全屏模式,变成正常模式。

复制代码 代码如下:

// 判断浏览器种类
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

// 退出全屏模式!
exitFullscreen();

需要注意的是,exitFullscreen只能由document对象调用,而不是启动全屏时传入的对象。

全屏属性和事件

不幸的是,全屏属性和事件的相关方法也需要添加浏览器前缀,但我相信很快就不需要这样做了。

1.document.fullScreenElement: 全屏显示的网页元素。
2.document.fullScreenEnabled: 判断当前是否处于全屏状态。

fullscreenchange事件会在启动全屏或退出全屏时触发:

复制代码 代码如下:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;


你仍然可以使用上面判断浏览器种类的方法给这个事件加上前缀。

全屏样式CSS

各种浏览器都提供了一个非常有用的全屏模式时的css样式规则:

复制代码 代码如下:
:-webkit-full-screen {
  /* properties */
}

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

/* styling the backdrop*/
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}

有些情况下,WebKit样式会出现一些问题,你最好把这些样式保持简洁。

这些全屏API都超级的简单,而且超级的有用。我第一次是在MDN's BananaBread demo中看到这个API的,那是一个枪击游戏,正好需要全屏化,它使用了事件监听来检测全屏状态。记住这些好用的API,需要的时候可以顺手拈来。

分享到:
评论

相关推荐

    Js方法打开网页全屏显示 模拟F11

    在网页开发中,有时我们需要实现一个功能,使得用户一进入页面,网页就能自动全屏显示,模拟浏览器的F11全屏模式。这样的需求在一些全屏展示、演示文稿或者游戏应用中尤为常见。本篇文章将详细讲解如何通过...

    用html5 js实现点击一个按钮达到浏览器全屏效果

    HTML5全屏API允许网页或应用在不使用...通过上述知识点,开发者可以实现点击按钮控制浏览器全屏显示,同时对全屏模式下的事件进行监听和样式自定义。这些知识点为实现全屏效果的网页和应用提供了技术基础和实现方法。

    实现浏览器全屏窗口的几种方法

    ### 实现浏览器全屏窗口的几种方法 在日常浏览网页的过程中,我们可能会遇到一种现象:浏览器的工具栏、菜单栏等界面元素消失不见,只留下网页的内容占据整个屏幕空间。这种全屏显示的效果不仅可以带来更加沉浸式的...

    Js浏览器全屏代码(模仿按F11)

    ### Js浏览器全屏代码(模仿按F11) #### 知识点概述 本文将详细介绍如何使用JavaScript实现浏览器全屏功能,类似于用户按下F11键的效果。此方法适用于需要临时进入全屏模式查看某些内容或者进行演示的情况。通过...

    浏览器模拟F11

    标题中的“浏览器模拟F11”指的是在网页中通过JavaScript实现类似于用户按下F11键的效果,即开启或退出全屏模式。这个功能在某些情况下非常有用,比如创建全屏的Web应用或游戏,或者为了提供更好的用户体验。下面将...

    JS实现全屏预览F11功能的示例代码

    - 浏览器全屏API通常受到同源策略的限制,如果网页不是在安全上下文中打开,或者没有得到用户的授权,全屏API可能无法正常工作。 ### 结论 通过上述分析,我们可以看出如何利用JavaScript和全屏API实现一个基本的...

    vue实现浏览器全屏展示功能

    在Vue.js项目中,实现浏览器全屏展示功能是一项常见的需求,特别是在创建沉浸式用户体验或进行全屏演示时。在本示例中,开发者使用了`sreenfull`这个第三方插件来简化这一过程。以下是关于如何使用`sreenfull`插件在...

    js模拟F11页面全屏显示

    这段代码会触发浏览器全屏或退出全屏,模拟了用户按下F11键的操作。 然后,是退出全屏的方法。与进入全屏相似,退出全屏也有相对应的API,但是同样的,出于兼容性的考虑,需要分别处理: ```javascript var cfs = ...

    JS实现全屏显示

    通过上述知识点的学习,我们可以了解到JS实现全屏显示不仅需要掌握基本的API使用方法,还需要注意浏览器的兼容性问题以及安全方面的考虑。正确地使用这些API可以显著提升用户的浏览体验,并为开发者提供更多可能性。

    javascript实现控制浏览器全屏

    本文将介绍如何使用JavaScript代码实现控制浏览器全屏的功能,并提供相应的代码示例。 首先,我们需要注意的是,不同的浏览器厂商对于全屏API的支持不同,因此在编写实现全屏功能的JavaScript代码时,需要考虑到...

    C# 浏览器完整版开发,支持视频、JS交互

    浏览器标签、HTML页面能播放视频、下载记录、JS交互(能调用原生相机、调用VLC集成能力:流视频播放)、软件更新、自定义右键菜单、F11全屏模式、F12调试模式、F5刷新、ALT+F5强制刷新、系统配置等功能、网络请求...

    JavaScript全屏和退出全屏事件总结(附代码)

    总结,JavaScript全屏和退出全屏的实现涉及到了跨浏览器兼容性问题,需要根据不同的浏览器API进行适配。通过判断当前状态和调用相应的API,我们可以创建一个功能完善的全屏控制机制。在编写代码时,确保考虑到各种...

    三种js全屏模式

    本文将深入探讨三种使用JavaScript实现的全屏模式方法,帮助开发者理解和应用这些技术,以适应不同场景的需求。 ### 一、调整窗口尺寸实现全屏 #### 实现原理: 这种方法通过调用`window.moveTo()`和`window....

    js实现各浏览器全屏代码实例

    例如,现代浏览器全屏和退出全屏的方法分别是fullScreen和exitScreen函数,它们会检测不同浏览器前缀的全屏方法并调用。对于低版本IE的全屏操作,使用了iefull函数。 从代码实现来看,主要包括以下几个函数: - ...

    js控制浏览器全屏示例代码

    而通过JavaScript控制浏览器全屏成为前端开发者经常要处理的一个需求。以下,我将详细解释如何使用JavaScript来控制浏览器全屏,以及相关的知识点。 首先,我们了解一个页面如何进入全屏模式。现代浏览器一般都提供...

    判断及设置浏览器全屏模式

    总之,判断和设置浏览器全屏模式可以通过不同的方式实现,具体取决于你所支持的浏览器类型。对于现代浏览器,推荐使用标准的Fullscreen API;而对于旧版本的IE,可以使用模拟键盘事件的方式。在实际应用中,一定要...

    web页面全屏切换JS插件

    在JavaScript中,我们可以利用浏览器提供的API来实现这一功能,主要涉及`Fullscreen API`。 1. **Fullscreen API** Fullscreen API 提供了在浏览器中进入和退出全屏模式的方法。主要有以下核心方法: - `element....

Global site tag (gtag.js) - Google Analytics