网页实现全屏及退出全屏方法资源-CSDN文库

共2个文件

html：1个

js：1个

5星 · 超过95%的资源需积分: 48 46 浏览量 2014-02-11 11:03:24 上传评论收藏 32KB RAR 举报

在网页开发中，有时我们需要提供一个功能，让用户可以一键将网页切换到全屏模式，以获得更好的浏览体验。本文将详细介绍如何使用JavaScript实现这一功能，同时结合jQuery库来简化操作。我们要理解浏览器的全屏API。在现代浏览器中，`Fullscreen API` 提供了进入和退出全屏模式的能力。这个API主要包含以下三个对象： 1. `document`: 包含了当前文档的全局信息，提供进入全屏和退出全屏的方法。 2. `element`: 需要进入全屏的元素，通常为`body`元素，但也可以是其他希望全屏显示的特定元素。 3. `fullscreenElement`: 返回当前处于全屏模式的元素，如果没有任何元素处于全屏状态，则返回`null`。进入全屏的API方法如下： - `element.requestFullScreen()`: 让指定的元素进入全屏模式。在某些浏览器中，可能需要使用 vendor prefix 的版本，如 `element.webkitRequestFullScreen()` 或 `element.msRequestFullScreen()`。 - `document.documentElement.requestFullScreen()`: 如果没有指定元素，直接将整个文档（即`html`元素）设为全屏。退出全屏的API方法包括： - `document.cancelFullScreen()`: 退出全屏模式。同样需要注意vendor prefix，如 `document.webkitCancelFullScreen()` 或 `document.msExitFullScreen()`。 - `document.exitFullScreen()`: 这是`cancelFullScreen`的别名，某些浏览器可能支持此方法。在实际应用中，我们还需要处理用户触发全屏和退出全屏的事件。`Fullscreen API` 提供了以下事件： - `fullscreenchange`: 当全屏状态发生变化时触发。 - `fullscreenerror`: 当全屏请求失败时触发。结合jQuery，我们可以创建一个简单的全屏插件。确保在页面中已经加载了jQuery库。然后，创建一个名为`fullscreenToggle.js`的文件，添加以下代码： ```javascript (function($) { $.fn.fullscreenToggle = function() { var element = this.get(0); if (!element) return; if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } }; })(jQuery); ``` 在HTML文件`index.html`中，我们可以这样使用这个插件： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS全屏效果</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="fullscreenToggle.js"></script> <style> #fullscreen-btn { padding: 10px 20px; background-color: #007BFF; color: white; border: none; cursor: pointer; font-size: 16px; } </style> </head> <body> <button id="fullscreen-btn">全屏/退出全屏</button> <script> $(document).ready(function() { $('#fullscreen-btn').click(function() { $('body').fullscreenToggle(); }); }); </script> </body> </html> ``` 以上代码中，我们创建了一个按钮，当用户点击时，会触发全屏/退出全屏的操作。按钮的样式可以根据需求进行自定义。总结起来，实现JavaScript网页全屏效果主要涉及`Fullscreen API`的使用，包括`requestFullScreen`、`exitFullScreen`等方法以及对应的事件监听。结合jQuery库，我们可以方便地创建一个全屏插件，实现一键全屏切换功能。在实际应用中，记得对浏览器的兼容性进行考虑，使用vendor prefix来适配不同的浏览器。

资源推荐

资源详情

资源评论

收起资源包目录

fullscreen.rar （2个子文件）

index.html 3KB

jquery.js 92KB

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网页全屏</title> <script src="js/jquery.js" ></script> </head> <body> <div class="fullscreen">点击全屏</div> <script> (function(d, e) { var f = { supportsFullScreen:false, isFullScreen:function() { return false; }, requestFullScreen:function() {}, cancelFullScreen:function() {}, fullScreenEventName:"", prefix:"" }, c = "webkit moz o ms khtml".split(" "); if (typeof document.cancelFullScreen != "undefined") { f.supportsFullScreen = true; } else { for (var b = 0, a = c.length; b < a; b++) { f.prefix = c[b]; if (typeof document[f.prefix + "CancelFullScreen"] != "undefined") { f.supportsFullScreen = true; break; } } } if (f.supportsFullScreen) { f.fullScreenEventName = f.prefix + "fullscreenchange"; f.isFullScreen = function() { switch (this.prefix) { case "": return document.fullScreen; case "webkit": return document.webkitIsFullScreen; default: return document[this.prefix + "FullScreen"]; } }; f.requestFullScreen = function(g) { return this.prefix === "" ? g.requestFullScreen() :g[this.prefix + "RequestFullScreen"](); }; f.cancelFullScreen = function(g) { return this.prefix === "" ? document.cancelFullScreen() :document[this.prefix + "CancelFullScreen"](); }; } if (typeof jQuery != "undefined") { jQuery.fn.requestFullScreen = function() { return this.each(function() { var g = jQuery(this); if (f.supportsFullScreen) { f.requestFullScreen(g); } }); }; } d.fullScreenApi = f; e.toggleFullScreen = function() { if (f.isFullScreen()) { f.cancelFullScreen(document.documentElement); } else { f.requestFullScreen(document.documentElement); } }; })(window, jQuery); //只能通过用户动作去触发全屏控制,onload没反应 $(".fullscreen").on("click",function(){$.toggleFullScreen()}); </script> </body> </html>

评论收藏

内容反馈