`
itace
  • 浏览: 181328 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

js进入全屏和退出全屏监听

    博客分类:
  • js
 
阅读更多

 

/**
* 进入全屏
*/
function enterFullScreen() {
	document.getElementById('abc').style.height = screenHeight+"px";
	var d= document.getElementById('abc');
	if (d.requestFullscreen) {
		d.requestFullScreen();
	} else if (d.webkitRequestFullScreen) {
		d.webkitRequestFullScreen();
	} else if (d.mozRequestFullScreen) {
		d.mozRequestFullScreen();
	} else {
		d.msRequestFullscreen();
	}
}
//监听退出全屏
window.onresize = function() {
	var ch = document.body.clientHeight;
	var sh = document.body.scrollHeight;
	if (ch!=sh) {//退出全屏
		document.getElementById('abc').style.height = bodyHeight+"px";
	}
//		if (document.exitFullscreen) {
//			document.exitFullscreen();
//		} else if (document.msExitFullscreen) {
//			document.msExitFullscreen();
//		} else if (document.mozCancelFullScreen) {
//			document.mozCancelFullScreen();
//		} else if (document.oRequestFullscreen) {
//			document.oCancelFullScreen();
//		} else if (document.webkitExitFullscreen) {
//			document.webkitExitFullscreen();
//		}
};

 

<audio controls="controls" style="display: none;"></audio>

分享到:
评论

相关推荐

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

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

    HTML5 video进入全屏和退出全屏的实现方法

    本文将详细讲解如何在HTML5的`&lt;video&gt;`标签中实现进入全屏和退出全屏的兼容性处理。 首先,浏览器对于全屏API的支持并不统一,导致我们需要针对不同的浏览器使用不同的方法。以下是一些主要浏览器的全屏API: 1. *...

    js实现网页全屏效果

    在现代浏览器中,`Fullscreen API` 提供了进入和退出全屏模式的能力。这个API主要包含以下三个对象: 1. `document`: 包含了当前文档的全局信息,提供进入全屏和退出全屏的方法。 2. `element`: 需要进入全屏的元素...

    vue全屏显示及退出组件.zip

    这个API提供了进入和退出全屏模式的方法,主要涉及以下两个方法: 1. `element.requestFullscreen()`: 这个方法用于使元素进入全屏模式。 2. `document.exitFullscreen()`: 这个方法用于退出全屏模式。 在Vue组件...

    JS 全屏和退出全屏详解及实例代码

    总的来说,JavaScript全屏和退出全屏功能能提供更好的用户体验,特别是在需要沉浸式视觉效果的应用场景中。通过适配不同浏览器的API,我们可以创建一个跨浏览器的全屏解决方案。同时,开发者应遵循浏览器的安全策略...

    JS实现全屏显示

    - `Document.exitFullscreen()`:这个方法用于退出全屏模式。 - `Element.cancelFullScreen()`:旧版API,已被废弃。 #### 知识点二:兼容性处理 由于浏览器厂商的支持情况不一,因此在实际开发中需要考虑不同...

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

    // 如果已经全屏,则退出全屏 } else { fullScreen(); // 否则,进入全屏 } ``` ### 方法三:监听全屏事件 为了实现自动全屏,可以在页面加载完成后触发全屏操作,可以利用`window.onload`或`DOMContentLoaded`...

    全屏窗口javascript全屏

    在HTML5中,`Fullscreen API`被引入,允许网页元素进入或退出全屏模式。主要涉及到的全局对象是`document`和`element`,以及以下几个关键方法: 1. `element.requestFullScreen()`:此方法用于将指定的元素(如`...

    js全屏切换组件

    JavaScript提供了全屏API来控制元素进入和退出全屏模式。全屏API主要包括`element.requestFullScreen()`和`document.exitFullScreen()`方法。`requestFullScreen()`使指定的元素进入全屏模式,而`exitFullScreen()`...

    web页面全屏切换JS插件

    Fullscreen API 提供了在浏览器中进入和退出全屏模式的方法。主要有以下核心方法: - `element.requestFullScreen()`: 使元素进入全屏模式。 - `document.exitFullScreen()`: 退出全屏模式。 - `document....

    js全屏显示

    下面是一段简单的示例代码,展示了如何使用JavaScript来实现全屏和退出全屏的功能: ```javascript // 请求全屏函数 function requestFullScreen() { var de = document.documentElement; if (de....

    js全屏事件fullscreenchange 实现全屏、退出全屏操作

    本文将深入讲解如何利用`fullscreenchange`事件实现全屏和退出全屏的操作,并讨论相关注意事项。 ### 1. 进入全屏 要使一个元素或者整个页面进入全屏模式,可以使用以下方法: ```javascript // 整个页面进入全屏...

    图片点击全屏显示JS代码

    此外,为了在退出全屏时有良好的用户体验,我们还需要监听全屏状态的变化,并在退出全屏时执行相应的回调函数: ```javascript // 监听全屏状态变化 document.addEventListener('fullscreenchange', function() { ...

    全屏js插件

    为了让用户能够方便地进入和退出全屏,我们需要为页面上的某个元素(比如一个按钮)绑定事件监听器。点击时,调用相应的全屏API方法。同时,我们还可以为按钮添加合适的图标和提示文字,以反映当前的全屏状态。 ```...

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

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

    js全屏显示加翻页效果源码

    【JavaScript全屏显示与翻页效果详解】 在网页设计中,有时我们需要实现全屏显示功能,以便用户可以无干扰地浏览内容,同时,为了增强用户体验,动态的翻页效果也常被用来展示如图书或文章内容。本篇将详细介绍如何...

    echarts 全屏 功能

    退出全屏则相反,恢复图表到原来的位置和大小。 **一、添加全屏按钮** 1. 在ECharts配置项中,我们可以通过`toolbox`来添加自定义工具栏。例如,我们可以创建一个名为"全屏"的新工具,代码如下: ```javascript ...

    js实现浏览器全屏兼容谷歌火狐等

    `requestFullScreen()` 方法用于将元素(通常是整个body)进入全屏模式,而`exitFullScreen()`方法则退出全屏模式。但是,需要注意的是,不同的浏览器可能有不同的实现方式,因此为了实现跨浏览器兼容,我们需要进行...

    javascript经典特效---打开真正的全屏窗口.rar

    综上所述,"javascript经典特效---打开真正的全屏窗口"这个主题涵盖了JavaScript中的全屏API使用,包括如何进入和退出全屏模式,以及如何监听和处理全屏状态变化。通过学习和实践这些知识点,开发者能够为用户提供...

Global site tag (gtag.js) - Google Analytics