92 lines
3.0 KiB
HTML
92 lines
3.0 KiB
HTML
<!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>
|
||
* { 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;
|
||
background-color: #007bff;
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 999;
|
||
}
|
||
.sidebar-container {
|
||
position: fixed;
|
||
top: 50px;
|
||
left: 0;
|
||
width: 240px; /* <--- 將這裡從 200px 修改為 250px (或其他您想要的值) */
|
||
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;
|
||
}
|
||
.main-content-area-wrapper {
|
||
margin-left: 240px; /* <--- 將這裡也從 200px 修改為 250px (與上面 .sidebar-container 的寬度一致) */
|
||
padding-top: 50px; /* Height of header */
|
||
height: calc(100vh - 50px);
|
||
overflow: hidden; /* Contains the iframe properly */
|
||
}
|
||
#mainContentFrame {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="top-header">社區智慧管理系統</div>
|
||
|
||
<div class="sidebar-container">
|
||
<iframe src="sidebar.html" id="sidebarFrame"></iframe>
|
||
</div>
|
||
|
||
<div class="main-content-area-wrapper">
|
||
<iframe id="mainContentFrame" name="mainContentFrame" src="dashboard.html"></iframe>
|
||
</div>
|
||
|
||
<script>
|
||
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 未找到!');
|
||
}
|
||
} else {
|
||
// console.log('Main page: 接收到未知訊息或格式不符:', message);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |