147 lines
4.1 KiB
HTML
147 lines
4.1 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Designer Admin Panel</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html, body {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#frame {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 0;
|
||
display: block;
|
||
}
|
||
|
||
/* 加载动画 */
|
||
#loading {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
text-align: center;
|
||
font-family: Arial, sans-serif;
|
||
color: #666;
|
||
}
|
||
|
||
.spinner {
|
||
border: 3px solid #f3f3f3;
|
||
border-top: 3px solid #3498db;
|
||
border-radius: 50%;
|
||
width: 40px;
|
||
height: 40px;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 10px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
#frame.loaded ~ #loading {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 加载指示器 -->
|
||
<div id="loading">
|
||
<div class="spinner"></div>
|
||
<p>加载中...</p>
|
||
</div>
|
||
|
||
<!-- 主页面 iframe -->
|
||
<iframe
|
||
id="frame"
|
||
src="https://app.aidg168.uk"
|
||
allow="clipboard-read; clipboard-write"
|
||
></iframe>
|
||
|
||
<script>
|
||
const frame = document.getElementById('frame');
|
||
const loading = document.getElementById('loading');
|
||
let loadTimeout;
|
||
|
||
// iframe 加载完成
|
||
frame.addEventListener('load', function() {
|
||
clearTimeout(loadTimeout);
|
||
this.classList.add('loaded');
|
||
console.log('✅ 页面加载成功');
|
||
});
|
||
|
||
// iframe 加载错误
|
||
frame.addEventListener('error', function(e) {
|
||
clearTimeout(loadTimeout);
|
||
loading.innerHTML = '<div style="color: red; padding: 20px; text-align: center;">' +
|
||
'<h3>❌ 加载失败</h3>' +
|
||
'<p>无法连接到：https://app.aidg168.uk</p>' +
|
||
'<p>请检查网络连接或更换 URL</p>' +
|
||
'<button onclick="location.reload()" style="padding: 10px 20px; cursor: pointer;">重试</button>' +
|
||
'</div>';
|
||
console.error('❌ iframe 加载错误:', e);
|
||
});
|
||
|
||
// 20秒超时处理
|
||
loadTimeout = setTimeout(function() {
|
||
if (!frame.classList.contains('loaded')) {
|
||
loading.innerHTML = '<div style="color: orange; padding: 20px; text-align: center;">' +
|
||
'<h3>⏱️ 加载超时</h3>' +
|
||
'<p>网页加载时间过长（超过 20 秒）</p>' +
|
||
'<p>当前 URL: https://app.aidg168.uk</p>' +
|
||
'<button onclick="location.reload()" style="padding: 10px 20px; cursor: pointer; margin: 5px;">重试</button>' +
|
||
'<button onclick="testUrl()" style="padding: 10px 20px; cursor: pointer; margin: 5px;">测试连接</button>' +
|
||
'</div>';
|
||
console.warn('⏱️ iframe 加载超时');
|
||
}
|
||
}, 20000);
|
||
|
||
// 测试 URL 是否可访问
|
||
function testUrl() {
|
||
loading.innerHTML = '<div style="padding: 20px; text-align: center;">' +
|
||
'<div class="spinner"></div>' +
|
||
'<p>正在测试连接...</p></div>';
|
||
|
||
fetch('https://app.aidg168.uk', { mode: 'no-cors' })
|
||
.then(() => {
|
||
alert('✅ 网站可以访问，正在重新加载...');
|
||
location.reload();
|
||
})
|
||
.catch(err => {
|
||
loading.innerHTML = '<div style="color: red; padding: 20px; text-align: center;">' +
|
||
'<h3>❌ 网站无法访问</h3>' +
|
||
'<p>错误: ' + err.message + '</p>' +
|
||
'<button onclick="location.reload()" style="padding: 10px 20px; cursor: pointer;">返回</button>' +
|
||
'</div>';
|
||
});
|
||
}
|
||
|
||
// 与 iframe 通信（可选）
|
||
window.addEventListener("message", function(e) {
|
||
if (e.origin === "https://app.aidg168.uk") {
|
||
console.log("📨 收到消息:", e.data);
|
||
}
|
||
});
|
||
|
||
function sendToIframe(data) {
|
||
frame.contentWindow.postMessage(data, "https://app.aidg168.uk");
|
||
}
|
||
|
||
// 调试信息
|
||
console.log('🚀 AdminPanel 已启动');
|
||
console.log('📍 加载 URL:', frame.src);
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|