Greasy Fork is available in English.
提供一个简单的按钮将当前网页全屏，并可通过浏览器的返回操作退出全屏。
// ==UserScript==
// @name 网页全屏工具
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 提供一个简单的按钮将当前网页全屏，并可通过浏览器的返回操作退出全屏。
// @author Assistant
// @match *://*/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// 定义按钮的样式
const buttonStyle = `
position: fixed;
top: 20px;
left: 20px;
z-index: 999999;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
transition: opacity 0.3s ease;
`;
// 定义SVG图标 (一个简单的全屏图标)
const svgIcon = `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
</svg>
`;
// 创建按钮元素
let fullscreenBtn = document.createElement('div');
fullscreenBtn.style.cssText = buttonStyle;
fullscreenBtn.innerHTML = svgIcon;
fullscreenBtn.title = "点击全屏";
// 标志变量，用于跟踪当前是否处于我们触发的全屏状态
let isOurFullscreen = false;
// 将按钮添加到页面
document.body.appendChild(fullscreenBtn);
// 进入全屏的函数
function enterFullscreen() {
let elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
// 按钮点击事件
fullscreenBtn.addEventListener('click', () => {
enterFullscreen();
});
// 监听全屏状态变化
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // 兼容旧版Safari
document.addEventListener('mozfullscreenchange', handleFullscreenChange); // 兼容旧版Firefox
document.addEventListener('MSFullscreenChange', handleFullscreenChange); // 兼容IE
function handleFullscreenChange() {
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
// 处于全屏状态
isOurFullscreen = true;
// 隐藏按钮
fullscreenBtn.style.display = 'none';
// 关键：在进入全屏时，向浏览器的历史记录中推送一个新状态
// 这样用户点击浏览器的“返回”按钮时，就会触发 popstate 事件
window.history.pushState({ fullscreen: true }, "");
} else {
// 退出全屏状态
isOurFullscreen = false;
// 重新显示按钮
fullscreenBtn.style.display = 'flex';
}
}
// 监听浏览器的“返回”操作 (popstate 事件)
window.addEventListener('popstate', (event) => {
// 如果当前处于我们触发的全屏状态
if (isOurFullscreen) {
// 退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
// 注意：退出全屏会触发 fullscreenchange 事件，那里的逻辑会负责重新显示按钮
}
});
})();