<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏自适应框架</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
height: 100vh;
display: flex;
flex-direction: column;
color: white;
}
.header {
padding: 15px 20px;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 100;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
display: flex;
align-items: center;
max-width: 60%;
}
.logo i {
margin-right: 10px;
color: #4dabf7;
flex-shrink: 0;
}
#page-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.controls {
display: flex;
gap: 15px;
}
.btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
background: #4dabf7;
color: white;
font-weight: 500;
cursor: button;
transition: all 0.3s ease;
display: flex;
align-items: center;
}
.btn i {
margin-right: 6px;
}
.btn:hover {
background: #339af0;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.btn:active {
transform: translateY(0);
}
.container {
flex: 1;
position: relative;
padding: 15px;
}
.iframe-container {
position: relative;
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
#fullscreen-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
background: #f8f9fa;
}
.loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.8);
z-index: 10;
transition: opacity 0.5s;
pointer-events: none;
opacity: 0;
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #4dabf7;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.status-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 8px 15px;
background: rgba(0, 0, 0, 0.7);
font-size: 0.85rem;
display: flex;
justify-content: space-between;
z-index: 50;
}
.url-display {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 70%;
}
.dimensions {
font-family: monospace;
}
.footer {
padding: 10px;
text-align: center;
font-size: 0.8rem;
background: rgba(0, 0, 0, 0.7);
}
@media (max-width: 768px) {
.header {
flex-direction: column;
gap: 10px;
}
.logo {
font-size: 1.2rem;
max-width: 100%;
}
.btn {
padding: 6px 12px;
font-size: 0.9rem;
}
.status-bar {
font-size: 0.75rem;
}
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<i>📺</i>
<span id="page-title">全屏自适应框架</span>
</div>
<div class="controls">
<button class="btn" id="refresh-btn">
<i>🔄</i> 刷新
</button>
<button class="btn" id="new-tab-btn">
<i>↗️</i> 新标签页打开
</button>
</div>
</div>
<div class="container">
<div class="iframe-container">
<div class="loading" id="loading">
<div class="spinner"></div>
</div>
<iframe id="fullscreen-iframe" src="https://kuaishou.com"0"></iframe>
</div>
</div>
<div class="status-bar">
<div class="url-display" id="url-display">https://bi.cool/user/f22c912afa3142c2821d5ac1c019f6da</div>
<div class="dimensions" id="dimensions">1920×1080</div>
</div>
<script>
// 获取DOM元素
const iframe = document.getElementById('fullscreen-iframe');
const loading = document.getElementById('loading');
const refreshBtn = document.getElementById('refresh-btn');
const newTabBtn = document.getElementById('new-tab-btn');
const urlDisplay = document.getElementById('url-display');
const dimensionsDisplay = document.getElementById('dimensions');
const pageTitle = document.getElementById('page-title');
// 更新尺寸显示
function updateDimensions() {
const width = window.innerWidth;
const height = window.innerHeight;
dimensionsDisplay.textContent = `${width}×${height}`;
}
// 初始更新
updateDimensions();
// 监听窗口大小变化
window.addEventListener('resize', updateDimensions);
// 刷新iframe
refreshBtn.addEventListener('click', () => {
loading.style.opacity = '1';
loading.style.pointerEvents = 'all';
// 重新加载iframe
iframe.src = iframe.src;
});
// 新标签页打开
newTabBtn.addEventListener('click', () => {
window.open(iframe.src, '_blank');
});
// iframe加载完成事件
iframe.addEventListener('load', () => {
try {
// 尝试获取目标页面的标题
const targetTitle = iframe.contentDocument.title;
if (targetTitle && targetTitle.trim() !== '') {
// 更新页面标题元素
pageTitle.textContent = targetTitle;
// 更新浏览器标签页标题
document.title = targetTitle;
}
} catch (e) {
// 处理跨域访问限制
console.log('无法获取目标页面标题:', e.message);
// 使用URL域名作为备选标题
const url = new URL(iframe.src);
pageTitle.textContent = url.hostname;
document.title = url.hostname;
}
// 更新URL显示
urlDisplay.textContent = iframe.src;
// 添加延迟让加载动画更自然
setTimeout(() => {
loading.style.opacity = '0';
loading.style.pointerEvents = 'none';
}, 500);
});
// 初始加载状态
window.addEventListener('load', () => {
// 初始设置标题为域名
const url = new URL(iframe.src);
pageTitle.textContent = url.hostname;
document.title = url.hostname;
setTimeout(() => {
loading.style.opacity = '0';
loading.style.pointerEvents = 'none';
}, 1500);
});
</script>
</body>
</html>
index.html