首页js实现页面加载时全屏显示

js实现页面加载时全屏显示

时间: 2024-10-18 16:18:26 浏览: 52

在JavaScript中，实现页面加载时全屏显示通常需要配合CSS和一些基本的DOM操作。以下是一个简单的示例：首先，在HTML文件中设置一个元素作为目标全屏显示的对象，比如`<div id="fullscreen-target">...</div>`： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> #fullscreen-target { /* 添加初始样式 */ width: 100%; height: 100vh; } /* 全屏模式下的样式 */ :root { display: flex; justify-content: center; align-items: center; min-height: 100vh; height: 100vh; /* 可能需要禁用此行，因为浏览器可能会有自己的全屏处理 */ overflow: hidden; transition: all .5s ease-in-out; } @media screen and (pointer: none) { /* 当进入全屏模式时应用的样式 */ :root { height: calc(100% - 100px); /* 减去状态栏高度或其他UI部分 */ } } </style> </head> <body> <button onclick="toggleFullScreen()">点击全屏</button> <div id="fullscreen-target">这将是全屏内容</div> <script> function toggleFullScreen() { const element = document.getElementById('fullscreen-target'); if (!element.requestFullscreen && !element.webkitRequestFullscreen) { // 判断兼容性 console.error('你的浏览器不支持全屏模式'); return; } element.requestFullscreen || element.webkitRequestFullscreen(); } </script> </body> </html> ``` 这个示例中，当用户点击按钮时，会触发`toggleFullScreen`函数。该函数检查浏览器是否支持全屏功能，然后通过`requestFullscreen`或`webkitRequestFullscreen`请求全屏。页面加载时并不会自动全屏，你需要手动触发这个过程。

阅读全文