2025-05-09 13:25:31 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-Hant">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
|
<title>社區儀表板</title>
|
|
|
|
|
|
<style>
|
2025-05-12 17:29:54 +08:00
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
|
|
html, body { height: 100%; font-family: Arial, sans-serif; background-color: #f5fafa; overflow: hidden; }
|
|
|
|
|
|
.top-header {
|
|
|
|
|
|
height: 50px;
|
2025-05-09 13:25:31 +08:00
|
|
|
|
background-color: #007bff;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
2025-05-12 17:29:54 +08:00
|
|
|
|
justify-content: center;
|
|
|
|
|
|
font-size: 18px;
|
2025-05-09 13:25:31 +08:00
|
|
|
|
font-weight: bold;
|
2025-05-12 17:29:54 +08:00
|
|
|
|
position: fixed;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
z-index: 999;
|
|
|
|
|
|
}
|
|
|
|
|
|
.sidebar-container {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
top: 50px;
|
|
|
|
|
|
left: 0;
|
2025-05-14 17:21:10 +08:00
|
|
|
|
width: 240px; /* <--- 將這裡從 200px 修改為 250px (或其他您想要的值) */
|
2025-05-12 17:29:54 +08:00
|
|
|
|
height: calc(100vh - 50px);
|
|
|
|
|
|
z-index: 998;
|
|
|
|
|
|
background-color: white; /* Fallback background for the container */
|
|
|
|
|
|
border-right: 1px solid #ddd;
|
|
|
|
|
|
}
|
|
|
|
|
|
.sidebar-container iframe {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
border: none;
|
2025-05-09 13:25:31 +08:00
|
|
|
|
}
|
2025-05-12 17:29:54 +08:00
|
|
|
|
.main-content-area-wrapper {
|
2025-05-14 17:21:10 +08:00
|
|
|
|
margin-left: 240px; /* <--- 將這裡也從 200px 修改為 250px (與上面 .sidebar-container 的寬度一致) */
|
2025-05-12 17:29:54 +08:00
|
|
|
|
padding-top: 50px; /* Height of header */
|
|
|
|
|
|
height: calc(100vh - 50px);
|
|
|
|
|
|
overflow: hidden; /* Contains the iframe properly */
|
2025-05-09 13:25:31 +08:00
|
|
|
|
}
|
2025-05-12 17:29:54 +08:00
|
|
|
|
#mainContentFrame {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
border: none;
|
2025-05-09 13:25:31 +08:00
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2025-05-12 17:29:54 +08:00
|
|
|
|
<div class="top-header">社區智慧管理系統</div>
|
|
|
|
|
|
|
2025-05-09 13:25:31 +08:00
|
|
|
|
<div class="sidebar-container">
|
2025-05-12 17:29:54 +08:00
|
|
|
|
<iframe src="sidebar.html" id="sidebarFrame"></iframe>
|
2025-05-09 13:25:31 +08:00
|
|
|
|
</div>
|
2025-05-12 17:29:54 +08:00
|
|
|
|
|
|
|
|
|
|
<div class="main-content-area-wrapper">
|
|
|
|
|
|
<iframe id="mainContentFrame" name="mainContentFrame" src="dashboard.html"></iframe>
|
2025-05-09 13:25:31 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
2025-05-12 17:29:54 +08:00
|
|
|
|
window.addEventListener('message', function(event) {
|
|
|
|
|
|
// 對於 file:/// URLs, event.origin 可能為 "null"。
|
|
|
|
|
|
// 在正式伺服器環境，您必須檢查 event.origin。
|
|
|
|
|
|
// if (event.origin !== 'http://your-expected-origin.com') return;
|
|
|
|
|
|
|
|
|
|
|
|
// 安全性提示：在 file:/// 環境下，嚴格的來源檢查可能不可靠。
|
|
|
|
|
|
// 但可以檢查訊息是否來自期望的 iframe。
|
|
|
|
|
|
// if (event.source !== document.getElementById('sidebarFrame').contentWindow) {
|
|
|
|
|
|
// console.warn('訊息來源非 sidebarFrame，已忽略。');
|
|
|
|
|
|
// return;
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
const message = event.data;
|
|
|
|
|
|
if (message && message.type === 'navigate' && typeof message.url === 'string') {
|
|
|
|
|
|
const mainContentFrame = document.getElementById('mainContentFrame');
|
|
|
|
|
|
if (mainContentFrame) {
|
|
|
|
|
|
console.log('Main page: 接收到導航請求 ->', message.url);
|
|
|
|
|
|
mainContentFrame.src = message.url;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('錯誤: mainContentFrame 未找到!');
|
2025-05-09 13:25:31 +08:00
|
|
|
|
}
|
2025-05-12 17:29:54 +08:00
|
|
|
|
} else {
|
|
|
|
|
|
// console.log('Main page: 接收到未知訊息或格式不符:', message);
|
2025-05-09 13:25:31 +08:00
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
