master

分支 (1)

管理

管理

master

electron-session-proxy
/
main.html

<!DOCTYPE html>
<html>

<head>
    <title>webview代理测试客户端</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* 跳转按钮样式 */
        #jumpBtn {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 15px 30px;
            font-size: 18px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            z-index: 100;
        }

        /* webview容器 */
        #webview-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #061f36;
            display: none;
            /* 初始隐藏整个容器 */
        }

        /* webview样式 */
        #webview {
            width: 100%;
            height: 100%;
            background-color: transparent;
        }

        /* 加载动画 */
        #loading-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            display: none;
        }

        /* 旋转动画 */
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* 加载文本 */
        .loading-text {
            margin-top: 10px;
            font-size: 16px;
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 跳转按钮 -->
    <button id="jumpBtn">跳转到webview</button>

    <!-- webview容器 -->
    <div id="webview-container">
        <!-- 加载动画 -->
        <div id="loading-spinner">
            <div class="spinner"></div>
            <div class="loading-text">加载中...</div>
        </div>
        <!-- webview -->
        <webview id="webview" disablewebsecurity></webview>
    </div>

    <script>
        const jumpBtn = document.getElementById('jumpBtn');
        const webviewContainer = document.getElementById('webview-container');
        const webview = document.getElementById('webview');
        const loadingSpinner = document.getElementById('loading-spinner');

        jumpBtn.addEventListener('click', function () {
            // 隐藏按钮
            this.style.display = 'none';

            // 显示webview容器
            webviewContainer.style.display = 'block';

            // 显示加载动画
            loadingSpinner.style.display = 'block';

            // 设置webview加载事件
            webview.addEventListener('did-start-loading', () => {
                loadingSpinner.style.display = 'block';
            });

            webview.addEventListener('did-stop-loading', () => {
                loadingSpinner.style.display = 'none';
            });

            webview.addEventListener('did-fail-load', (event) => {
                console.error('加载失败:', event.errorDescription);
                loadingSpinner.style.display = 'none';
                // 可以在这里添加重试逻辑或错误提示
            });

            // 动态设置src（这会触发加载）
            webview.src = "https://10.8.0.126";
        });
    </script>
</body>

</html>