Fix page loader: execute inline scripts, JS module loading optional

- innerHTML strips script tags, now extract and eval them
- External .js module: 404 = skip gracefully (no error)
- Progress bar: completes regardless of JS module
- Proxy/projects pages now render with CSS + inline JS executes
This commit is contained in:
qinglong
2026-06-11 14:43:24 +08:00
parent dd8a31e29a
commit c07cea4ff7
3 changed files with 31 additions and 26 deletions
+1 -1
View File
@@ -92,7 +92,7 @@ commands:
permissions: permissions:
- framework.command.test - framework.command.test
source: internal source: internal
last_updated: 279099.130874572 last_updated: 279407.522655496
plugin_commands: plugin_commands:
example_plugin: example_plugin:
echo: *id001 echo: *id001
+1 -1
View File
@@ -1,5 +1,5 @@
http_port: 4200 http_port: 4200
last_updated: 279099.134553218 last_updated: 279407.52679284
plugin_routes: plugin_routes:
example_plugin: example_plugin:
- methods: - methods:
+25 -20
View File
@@ -43,35 +43,40 @@ async function loadPage(pageName) {
await new Promise(r => requestAnimationFrame(() => { bar.style.width = '80%'; setTimeout(r, 100); })); await new Promise(r => requestAnimationFrame(() => { bar.style.width = '80%'; setTimeout(r, 100); }));
try { try {
// 🟢 关键修改:fetch 路径必须包含 /static/ const resp = await fetch(`./static/pages/${pageName}.html`);
const html = await fetch(`./static/pages/${pageName}.html`).then(r => { if(!resp.ok) throw new Error('404');
if(!r.ok) throw new Error('404'); const html = await resp.text();
return r.text();
// Extract inline scripts before innerHTML (browsers skip them)
const scripts = [];
const cleanHtml = html.replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gi, (m, code) => {
scripts.push(code.trim()); return '';
}); });
content.innerHTML = html;
// 动态加载对应 JS 模块 content.innerHTML = cleanHtml;
// 🟢 关键修改:script src 路径必须包含 /static/
const script = document.createElement('script');
script.src = `./static/pages/${pageName}.js?t=${Date.now()}`;
script.onload = () => { // Execute inline scripts
// 触发模块初始化 for(const code of scripts) {
const moduleName = pageName.charAt(0).toUpperCase() + pageName.slice(1) + 'Module'; try { (new Function(code)).call(window); } catch(e) { console.error('Inline script error:', e); }
if(window[moduleName]?.init) {
window[moduleName].init();
} }
// Load external JS module (optional — skip if 404)
try {
const jsResp = await fetch(`./static/pages/${pageName}.js?t=${Date.now()}`);
if(jsResp.ok) {
const jsCode = await jsResp.text();
(new Function(jsCode)).call(window);
const moduleName = pageName.charAt(0).toUpperCase() + pageName.slice(1) + 'Module';
if(window[moduleName]?.init) window[moduleName].init();
}
} catch(e) { /* JS module optional */ }
bar.style.width = '100%'; bar.style.width = '100%';
setTimeout(() => bar.classList.remove('active'), 200); setTimeout(() => bar.classList.remove('active'), 200);
};
script.onerror = () => {
throw new Error('JS Load Failed');
};
document.head.appendChild(script);
} catch(e) { } catch(e) {
content.innerHTML = `<div style="color:var(--error); text-align:center; margin-top:20vh;">页面加载失败: ${e.message}</div>`; content.innerHTML = `<div style="color:var(--error); text-align:center; margin-top:20vh;">页面加载失败: ${e.message}</div>`;
bar.style.background = 'var(--error)'; bar.style.background = 'var(--error)';
setTimeout(() => { bar.style.width = '100%'; setTimeout(() => { bar.classList.remove('active'); bar.style.background = 'var(--accent)'; }, 200); }, 100); setTimeout(() => { bar.style.width = '100%'; setTimeout(() => { bar.classList.remove('active'); bar.style.background = 'var(--primary)'; }, 200); }, 100);
} }
} }