iframe-test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selectly iframe Test - JumpServer Simulation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            background: #2c3e50;
            color: white;
            padding: 15px;
            border-radius: 8px 8px 0 0;
            margin-bottom: 0;
        }
        
        .tab-container {
            background: white;
            border: 1px solid #ddd;
            border-radius: 0 0 8px 8px;
            min-height: 600px;
        }
        
        .tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            background: #f8f9fa;
        }
        
        .tab {
            padding: 12px 20px;
            cursor: pointer;
            border-right: 1px solid #ddd;
            background: #e9ecef;
            transition: background-color 0.2s;
        }
        
        .tab.active {
            background: white;
            border-bottom: 1px solid white;
            margin-bottom: -1px;
        }
        
        .tab:hover:not(.active) {
            background: #dee2e6;
        }
        
        .tab-content {
            position: relative;
            height: 550px;
        }
        
        .iframe-wrapper {
            width: 100%;
            height: 100%;
            display: none;
        }
        
        .iframe-wrapper.active {
            display: block;
        }
        
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .controls {
            margin-bottom: 20px;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        
        button:hover {
            background: #0056b3;
        }
        
        .status {
            margin-top: 10px;
            padding: 10px;
            background: #e7f3ff;
            border: 1px solid #bee5eb;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="controls">
            <h2>Selectly iframe Support Test - JumpServer Simulation</h2>
            <p>This simulates a JumpServer-like environment with dynamic iframe tabs. Test text selection in different iframes.</p>
            <button onclick="addNewTab()">Connect New Server</button>
            <button onclick="removeTab()">Disconnect Current</button>
            <button onclick="testCrossOrigin()">Test Cross-Origin iframe</button>
            <div class="status" id="status">Ready to test. Click "Connect New Server" to create a new tab with iframe content.</div>
        </div>

        <div class="header">
            <h1>🖥️ JumpServer Management Console</h1>
        </div>

        <div class="tab-container">
            <div class="tabs" id="tabs">
                <!-- Tabs will be dynamically added here -->
            </div>
            <div class="tab-content" id="tab-content">
                <!-- iframe content will be added here -->
            </div>
        </div>
    </div>

    <script>
        let tabCounter = 0;
        let activeTab = null;

        const sampleContents = [
            {
                title: 'Web Server Logs',
                content: `
                    <div style="padding: 20px; font-family: monospace; background: #1e1e1e; color: #00ff00; height: 100vh; overflow-y: auto;">
                        <h3 style="color: #ffffff;">📊 Web Server Access Logs</h3>
                        <div style="margin: 10px 0;">2024-01-15 10:30:15 [INFO] Server started on port 8080</div>
                        <div style="margin: 10px 0;">2024-01-15 10:30:23 [INFO] GET /api/users - 200 OK - 45ms</div>
                        <div style="margin: 10px 0;">2024-01-15 10:30:31 [ERROR] POST /api/login - 401 Unauthorized - Invalid credentials for user: admin@example.com</div>
                        <div style="margin: 10px 0;">2024-01-15 10:30:45 [WARN] High memory usage detected: 85% of available RAM</div>
                        <div style="margin: 10px 0;">2024-01-15 10:31:02 [INFO] Database connection pool: 15/20 connections active</div>
                        <div style="margin: 10px 0;">2024-01-15 10:31:15 [DEBUG] Cache hit rate: 92.5% (1843/1996 requests)</div>
                        <p style="color: #ffff00; margin: 20px 0;">💡 试着选择这些日志文本来测试 Selectly 的翻译和解释功能。Select any of these log entries to test Selectly's translation and explanation features.</p>
                        <div style="margin: 10px 0;">2024-01-15 10:31:30 [INFO] SSL certificate expires in 30 days</div>
                        <div style="margin: 10px 0;">2024-01-15 10:31:45 [ERROR] Failed to connect to external API: timeout after 30s</div>
                        <div style="margin: 10px 0;">2024-01-15 10:32:00 [INFO] Backup completed successfully: 2.3GB archived</div>
                    </div>
                `
            },
            {
                title: 'Database Console',
                content: `
                    <div style="padding: 20px; background: #f8f9fa; height: 100vh;">
                        <h3>🗄️ Database Management Console</h3>
                        <div style="background: white; padding: 15px; border-radius: 5px; margin: 15px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                            <h4>Query Results</h4>
                            <table style="width: 100%; border-collapse: collapse;">
                                <tr style="background: #007bff; color: white;">
                                    <th style="padding: 10px; border: 1px solid #ddd;">ID</th>
                                    <th style="padding: 10px; border: 1px solid #ddd;">Username</th>
                                    <th style="padding: 10px; border: 1px solid #ddd;">Email</th>
                                    <th style="padding: 10px; border: 1px solid #ddd;">Status</th>
                                </tr>
                                <tr>
                                    <td style="padding: 10px; border: 1px solid #ddd;">1001</td>
                                    <td style="padding: 10px; border: 1px solid #ddd;">admin_user</td>
                                    <td style="padding: 10px; border: 1px solid #ddd;">admin@company.com</td>
                                    <td style="padding: 10px; border: 1px solid #ddd;">Active</td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px; border: 1px solid #ddd;">1002</td>
                                    <td style="padding: 10px; border: 1px solid #ddd;">developer_john</td>
                                    <td style="padding: 10px; border: 1px solid #ddd;">john.doe@company.com</td>
                                    <td style="padding: 10px; border: 1px solid #ddd;">Active</td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px; border: 1px solid #ddd;">1003</td>
                                    <td style="padding: 10px; border: 1px solid #ddd;">test_user</td>
                                    <td style="padding: 10px; border: 1px solid #ddd;">test@company.com</td>
                                    <td style="padding: 10px; border: 1px solid #ddd;">Inactive</td>
                                </tr>
                            </table>
                        </div>
                        <div style="background: #fff3cd; padding: 15px; border-radius: 5px; border: 1px solid #ffeaa7;">
                            <strong>📝 测试说明 (Test Instructions):</strong><br>
                            尝试选择表格中的用户名或邮箱地址，然后使用 Selectly 进行翻译或解释。<br>
                            Try selecting usernames or email addresses in the table, then use Selectly for translation or explanation.
                        </div>
                    </div>
                `
            },
            {
                title: 'System Monitor',
                content: `
                    <div style="padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; height: 100vh;">
                        <h3>📈 System Performance Monitor</h3>
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0;">
                            <div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px;">
                                <h4>CPU Usage</h4>
                                <div style="font-size: 24px; color: #00ff88;">72.5%</div>
                                <p>Current load average: 2.1, 1.8, 1.5</p>
                            </div>
                            <div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px;">
                                <h4>Memory Usage</h4>
                                <div style="font-size: 24px; color: #ff6b6b;">8.2GB / 16GB</div>
                                <p>Available memory: 7.8GB</p>
                            </div>
                        </div>
                        <div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px; margin: 20px 0;">
                            <h4>Recent System Events</h4>
                            <div style="font-family: monospace; font-size: 14px;">
                                <div>• Process nginx restarted successfully</div>
                                <div>• Disk usage warning: /var/log is 89% full</div>
                                <div>• Network interface eth0: 1000Mbps link detected</div>
                                <div>• User session started: developer_jane from 192.168.1.100</div>
                                <div>• Security scan completed: 0 vulnerabilities found</div>
                            </div>
                        </div>
                        <div style="background: rgba(255,215,0,0.2); padding: 15px; border-radius: 10px; border: 1px solid rgba(255,215,0,0.5);">
                            <strong>🎯 iframe 测试重点 (iframe Test Focus):</strong><br>
                            在这个动态加载的 iframe 中选择系统监控数据，验证 Selectly 是否能正确工作。<br>
                            Select system monitoring data in this dynamically loaded iframe to verify Selectly works correctly.
                        </div>
                    </div>
                `
            }
        ];

        function addNewTab() {
            tabCounter++;
            const tabId = `tab-${tabCounter}`;
            const content = sampleContents[(tabCounter - 1) % sampleContents.length];
            
            // Create tab
            const tab = document.createElement('div');
            tab.className = 'tab';
            tab.textContent = `${content.title} #${tabCounter}`;
            tab.onclick = () => switchTab(tabId);
            document.getElementById('tabs').appendChild(tab);
            
            // Create iframe wrapper
            const wrapper = document.createElement('div');
            wrapper.className = 'iframe-wrapper';
            wrapper.id = tabId;
            
            // Create iframe with dynamic content
            const iframe = document.createElement('iframe');
            iframe.style.border = 'none';
            iframe.style.width = '100%';
            iframe.style.height = '100%';
            
            wrapper.appendChild(iframe);
            document.getElementById('tab-content').appendChild(wrapper);
            
            // Load content into iframe
            iframe.onload = () => {
                try {
                    const doc = iframe.contentDocument || iframe.contentWindow.document;
                    doc.open();
                    doc.write(`
                        <!DOCTYPE html>
                        <html>
                        <head>
                            <meta charset="UTF-8">
                            <title>${content.title}</title>
                        </head>
                        <body style="margin: 0; padding: 0;">
                            ${content.content}
                        </body>
                        </html>
                    `);
                    doc.close();
                    
                    updateStatus(`✅ Created new tab: ${content.title} #${tabCounter} (same-origin iframe)`);
                } catch (e) {
                    updateStatus(`❌ Failed to create iframe content: ${e.message}`);
                }
            };
            
            // Set a data URL to trigger load
            iframe.src = 'about:blank';
            
            // Switch to new tab
            setTimeout(() => switchTab(tabId), 100);
        }

        function removeTab() {
            if (!activeTab) {
                updateStatus('❌ No active tab to remove');
                return;
            }
            
            const tab = document.querySelector(`div.tab.active`);
            const content = document.getElementById(activeTab);
            
            if (tab) tab.remove();
            if (content) content.remove();
            
            updateStatus(`🗑️ Removed tab: ${activeTab}`);
            
            // Switch to first available tab
            const remainingTabs = document.querySelectorAll('.tab');
            const remainingContent = document.querySelectorAll('.iframe-wrapper');
            
            if (remainingTabs.length > 0 && remainingContent.length > 0) {
                switchTab(remainingContent[0].id);
            } else {
                activeTab = null;
            }
        }

        function switchTab(tabId) {
            // Remove active class from all tabs and content
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.iframe-wrapper').forEach(w => w.classList.remove('active'));
            
            // Add active class to selected tab and content
            const tabElement = Array.from(document.querySelectorAll('.tab')).find(t => 
                t.onclick.toString().includes(tabId)
            );
            const contentElement = document.getElementById(tabId);
            
            if (tabElement) tabElement.classList.add('active');
            if (contentElement) contentElement.classList.add('active');
            
            activeTab = tabId;
            updateStatus(`🔄 Switched to tab: ${tabId}`);
        }

        function testCrossOrigin() {
            tabCounter++;
            const tabId = `tab-${tabCounter}`;
            
            // Create tab
            const tab = document.createElement('div');
            tab.className = 'tab';
            tab.textContent = `Cross-Origin Test #${tabCounter}`;
            tab.onclick = () => switchTab(tabId);
            document.getElementById('tabs').appendChild(tab);
            
            // Create iframe wrapper
            const wrapper = document.createElement('div');
            wrapper.className = 'iframe-wrapper';
            wrapper.id = tabId;
            
            // Create cross-origin iframe
            const iframe = document.createElement('iframe');
            iframe.style.border = 'none';
            iframe.style.width = '100%';
            iframe.style.height = '100%';
            iframe.src = 'https://httpbin.org/html'; // Cross-origin example
            
            wrapper.appendChild(iframe);
            document.getElementById('tab-content').appendChild(wrapper);
            
            updateStatus(`🌐 Created cross-origin iframe: httpbin.org (Selectly should still work via content script injection)`);
            
            // Switch to new tab
            setTimeout(() => switchTab(tabId), 100);
        }

        function updateStatus(message) {
            const status = document.getElementById('status');
            status.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
        }

        // Initialize with first tab
        document.addEventListener('DOMContentLoaded', () => {
            addNewTab();
            updateStatus('🚀 JumpServer simulation loaded. Ready to test Selectly iframe support!');
        });
    </script>
</body>
</html>