本地报表服务器全屏显示

// ==UserScript==
// @name         powerbi
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://101.6.4.20/powerbi/?*
// @grant        GM_addStyle
// ==/UserScript==

 

(function() {
    'use strict';
    GM_addStyle('.explorationNavigationContent{height:0px !important}')
    GM_addStyle('.exploreCanvas{bottom:0px !important}')
    GM_addStyle('.scroll-bar-div{visibility:hidden !important}')
})();

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        /* 页面基础样式 - 彻底清除所有边距 */
        * {
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }
       
        html, body {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            height: 100% !important;
            overflow: hidden !important;
            position: relative;
            background: black; /* 防止白边显示 */
        }
       
        /* iframe容器 - 彻底消除边距 */
        .iframe-container {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            outline: none !important;
            overflow: hidden !important;
            background: black; /* 防止白边 */
        }
       
        iframe {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: calc(100vh + 120px) !important;
            border: none !important;
            outline: none !important;
            margin: 0 !important;
            padding: 0 !important;
            transform: translateY(-25px) !important;
            background: transparent;
        }
       
        /* 全屏时的额外优化 - 彻底消除边距 */
        :fullscreen,
        :-webkit-full-screen,
        :-moz-full-screen {
            margin: 0 !important;
            padding: 0 !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            position: relative !important;
            width: 100vw !important;
            height: 100vh !important;
            background: black !important;
        }
       
        :fullscreen *,
        :-webkit-full-screen *,
        :-moz-full-screen * {
            margin: 0 !important;
            padding: 0 !important;
        }
       
        :fullscreen .iframe-container,
        :-webkit-full-screen .iframe-container,
        :-moz-full-screen .iframe-container {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            background: black !important;
        }
       
        :fullscreen iframe,
        :-webkit-full-screen iframe,
        :-moz-full-screen iframe {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: calc(100vh + 150px) !important;
            transform: translateY(-35px) !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            outline: none !important;
        }
    </style>
   
    <!-- 添加脉冲动画样式 -->
    <style>
        /* 全屏按钮 */
        .fullscreen-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-family: Arial, sans-serif;
            transition: all 0.3s;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
       
        .fullscreen-btn:hover {
            background: rgba(0, 0, 0, 0.9);
            transform: scale(1.05);
        }
       
        .fullscreen-btn:active {
            transform: scale(0.95);
        }
       
        /* 全屏时隐藏按钮 - 增强选择器 */
        :fullscreen .fullscreen-btn,
        :-webkit-full-screen .fullscreen-btn,
        :-moz-full-screen .fullscreen-btn,
        html:fullscreen .fullscreen-btn,
        html:-webkit-full-screen .fullscreen-btn,
        html:-moz-full-screen .fullscreen-btn {
            display: none !important;
            opacity: 0 !important;
            pointer-events: none !important;
            visibility: hidden !important;
        }
       
        /* 脉冲动画提示用户点击 */
        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
            50% { transform: scale(1.1); box-shadow: 0 6px 12px rgba(0,0,0,0.5); }
            100% { transform: scale(1); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
        }
    </style>
    <script>
        // 2小时自动刷新（7200000毫秒）
        setTimeout(function(){
            location.reload(true);
        }, 7200000);

        let fullscreenSupported = false;
       
        // 检测全屏支持
        function checkFullscreenSupport() {
            fullscreenSupported = !!(document.documentElement.requestFullscreen ||
                                   document.documentElement.webkitRequestFullscreen ||
                                   document.documentElement.mozRequestFullScreen ||
                                   document.documentElement.msRequestFullscreen);
            return fullscreenSupported;
        }
       
        // 全屏功能 - 直接调用
        function requestFullscreen() {
            console.log('尝试进入全屏...');
            const element = document.documentElement;
           
            try {
                if (element.requestFullscreen) {
                    element.requestFullscreen().then(() => {
                        console.log('全屏模式激活成功');
                    }).catch(err => {
                        console.error('全屏请求失败:', err);
                    });
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                    console.log('WebKit全屏模式激活');
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                    console.log('Firefox全屏模式激活');
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                    console.log('IE/Edge全屏模式激活');
                } else {
                    console.log('此浏览器不支持全屏 API');
                    alert('此浏览器不支持全屏功能，请手动按 F11 进入全屏');
                }
            } catch (error) {
                console.error('全屏请求异常:', error);
                alert('全屏功能不可用，请手动按 F11 进入全屏');
            }
        }
       
        // 退出全屏功能
        function exitFullscreen() {
            console.log('尝试退出全屏...');
            try {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } catch (error) {
                console.error('退出全屏异常:', error);
            }
        }
       
        // 切换全屏状态
        function toggleFullscreen() {
            const isFullscreen = document.fullscreenElement ||
                                document.webkitFullscreenElement ||
                                document.mozFullScreenElement ||
                                document.msFullscreenElement;
           
            if (isFullscreen) {
                exitFullscreen();
            } else {
                requestFullscreen();
            }
        }

        // 动态调整iframe偏移 - 彻底消除边距
        function adjustIframe() {
            const iframe = document.querySelector('iframe');
            const container = document.querySelector('.iframe-container');
            if (!iframe || !container) return;
           
            // 强制清除边距
            document.body.style.margin = '0';
            document.body.style.padding = '0';
            document.documentElement.style.margin = '0';
            document.documentElement.style.padding = '0';
           
            const isFullscreen = document.fullscreenElement ||
                                document.webkitFullscreenElement ||
                                document.mozFullScreenElement ||
                                document.msFullscreenElement;
           
            if (isFullscreen) {
                // 全屏时的调整
                container.style.position = 'fixed';
                container.style.top = '0';
                container.style.left = '0';
                container.style.right = '0';
                container.style.bottom = '0';
                container.style.width = '100vw';
                container.style.height = '100vh';
                container.style.margin = '0';
                container.style.padding = '0';
                container.style.border = 'none';
                container.style.background = 'black';
               
                iframe.style.position = 'absolute';
                iframe.style.top = '0';
                iframe.style.left = '0';
                iframe.style.width = '100vw';
                iframe.style.height = 'calc(100vh + 150px)';
                iframe.style.transform = 'translateY(-35px)';
                iframe.style.margin = '0';
                iframe.style.padding = '0';
                iframe.style.border = 'none';
                iframe.style.outline = 'none';
               
                // 强制隐藏全屏按钮
                const btn = document.querySelector('.fullscreen-btn');
                if (btn) {
                    btn.style.display = 'none';
                    btn.style.visibility = 'hidden';
                }
            } else {
                // 普通模式
                container.style.position = 'fixed';
                container.style.top = '0';
                container.style.left = '0';
                container.style.right = '0';
                container.style.bottom = '0';
                container.style.width = '100vw';
                container.style.height = '100vh';
                container.style.margin = '0';
                container.style.padding = '0';
                container.style.border = 'none';
                container.style.background = 'black';
               
                iframe.style.position = 'absolute';
                iframe.style.top = '0';
                iframe.style.left = '0';
                iframe.style.width = '100vw';
                iframe.style.height = 'calc(100vh + 120px)';
                iframe.style.transform = 'translateY(-25px)';
                iframe.style.margin = '0';
                iframe.style.padding = '0';
                iframe.style.border = 'none';
                iframe.style.outline = 'none';
               
                // 显示全屏按钮
                const btn = document.querySelector('.fullscreen-btn');
                if (btn) {
                    btn.style.display = 'block';
                    btn.style.visibility = 'visible';
                }
            }
        }
       
        // 监听全屏状态变化
        document.addEventListener('fullscreenchange', adjustIframe);
        document.addEventListener('webkitfullscreenchange', adjustIframe);
        document.addEventListener('mozfullscreenchange', adjustIframe);
       
        window.addEventListener('resize', adjustIframe);
       
        // 页面加载完成后的初始化
        window.addEventListener('load', function() {
            adjustIframe();
            checkFullscreenSupport();
           
            // 添加全屏按钮的事件监听
            const fullscreenBtn = document.querySelector('.fullscreen-btn');
            if (fullscreenBtn) {
                fullscreenBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('全屏按钮被点击');
                    toggleFullscreen();
                });
               
                // 显示支持情况
                if (!fullscreenSupported) {
                    fullscreenBtn.textContent = '🖥️ 按 F11 全屏';
                    fullscreenBtn.title = '此浏览器不支持全屏 API，请手动按 F11';
                }
            }
           
            // 双击屏幕也可以切换全屏
            document.addEventListener('dblclick', function(e) {
                // 避免在按钮上双击时重复触发
                if (!e.target.classList.contains('fullscreen-btn')) {
                    console.log('双击触发全屏切换');
                    toggleFullscreen();
                }
            });
           
            // 键盘快捷键 F11 和 Esc
            document.addEventListener('keydown', function(e) {
                if (e.key === 'F11') {
                    e.preventDefault();
                    console.log('F11 键触发全屏切换');
                    toggleFullscreen();
                } else if (e.key === 'Escape') {
                    const isFullscreen = document.fullscreenElement ||
                                        document.webkitFullscreenElement ||
                                        document.mozFullScreenElement ||
                                        document.msFullscreenElement;
                    if (isFullscreen) {
                        console.log('Esc 键退出全屏');
                        exitFullscreen();
                    }
                }
            });
           
            // 3秒后显示自动全屏提示（如果还没有全屏）
            setTimeout(function() {
                const isFullscreen = document.fullscreenElement ||
                                    document.webkitFullscreenElement ||
                                    document.mozFullScreenElement ||
                                    document.msFullscreenElement;
               
                if (!isFullscreen && fullscreenBtn) {
                    fullscreenBtn.style.animation = 'pulse 2s infinite';
                    if (fullscreenSupported) {
                        fullscreenBtn.textContent = '🖥️ 点击全屏';
                    }
                }
            }, 3000);
           
            console.log('页面初始化完成，全屏支持:', fullscreenSupported);
        });
    </script>
</head>
<body>
    <div class="iframe-container">
        <iframe
            src="http://10.56.43.110/powerbi/?id=c920a033-c363-4c51-ad2d-a13f7d4c18be"
            loading="lazy">
        </iframe>
    </div>
   
    <!-- 全屏按钮 -->
    <button class="fullscreen-btn" title="点击进入全屏模式">
        🖥️ 全屏显示
    </button>
</body>
</html>
posted @ 2025-09-30 15:27  SeanHu  阅读(8)  评论(0)    收藏  举报