在前端开发中，实现全屏功能通常可以通过HTML5的Fullscreen API来完成。以下是一个简单的示例，展示了如何使用这个API来让页面元素（比如一个视频或div）进入全屏模式：
<!DOCTYPE html>
<html>
<head>
<title>全屏示例</title>
</head>
<body>
<div id="fullscreenElement" style="width: 300px; height: 200px; background-color: lightblue;">
点击我进入全屏模式
</div>
<script>
document.getElementById('fullscreenElement').addEventListener('click', function() {
if (this.requestFullscreen) {
this.requestFullscreen(); // W3C 标准方法
} else if (this.mozRequestFullScreen) { // Firefox
this.mozRequestFullScreen();
} else if (this.webkitRequestFullscreen) { // Chrome, Safari 和 Opera
this.webkitRequestFullscreen();
} else if (this.msRequestFullscreen) { // IE/Edge
this.msRequestFullscreen();
}
});
document.addEventListener("fullscreenchange", function(event) {
if (document.fullscreenElement) {
console.log("进入全屏模式");
} else {
console.log("退出全屏模式");
}
});
</script>
</body>
</html>
这个示例中，我们为一个div元素添加了一个点击事件监听器。当用户点击这个div时，会尝试使用不同的全屏方法（因为不同的浏览器可能支持不同的方法）来请求全屏模式。同时，我们还添加了一个监听fullscreenchange事件的处理函数，以便在全屏模式发生变化时执行一些操作（比如打印日志）。
请注意，全屏请求通常需要在用户交互（如点击或按键）的上下文中进行，否则浏览器可能会阻止全屏模式。此外，全屏API可能还受到浏览器安全策略的限制，例如在某些跨域场景下可能无法使用。
另外，如果你想要让整个网页进入全屏模式，而不是某个特定的元素，你可以将document.documentElement（代表<html>元素）作为全屏请求的目标。例如：
document.documentElement.requestFullscreen();