hanshiyang
0f0eca6128
将publicDir从false改为'public'以正确访问静态资源 更新demo.html默认加载逻辑，自动指向/test.ocd并修改iframe引用为vocd.html
52 lines
2.1 KiB
HTML
52 lines
2.1 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Canvas Editor Iframe Demo</title>
|
||
<style>
|
||
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; margin: 0; padding: 16px; }
|
||
.panel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
|
||
.panel input[type="text"] { width: 420px; padding: 6px 8px; font-size: 12px; }
|
||
.panel button { padding: 6px 12px; font-size: 12px; cursor: pointer; }
|
||
iframe { width: 100%; height: 80vh; border: 1px solid #e2e6ed; }
|
||
small { color: #6b7280; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h3>父页面通过地址拼接加载子页面（filePath + mode=edit）</h3>
|
||
<div class="panel">
|
||
<input id="urlInput" type="text" placeholder="输入同源文件URL" />
|
||
<button id="loadBtn">设置 iframe 地址</button>
|
||
<small>仅拼接 iframe src：vocd.html?filePath=URL&mode=edit</small>
|
||
</div>
|
||
<iframe id="editorFrame" src="./vocd.html" referrerpolicy="no-referrer"></iframe>
|
||
|
||
<script>
|
||
const editorFrame = document.getElementById('editorFrame')
|
||
const loadBtn = document.getElementById('loadBtn')
|
||
const urlInput = document.getElementById('urlInput')
|
||
|
||
// 页面加载后，自动将 iframe 指向 vocd.html 并使用同源 /test.ocd
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const defaultUrl = '/test.ocd' // 来自 public，同源可直接访问
|
||
urlInput.value = defaultUrl
|
||
const base = './vocd.html'
|
||
const src = `${base}?filePath=${encodeURIComponent(defaultUrl)}&mode=edit`
|
||
editorFrame.src = src
|
||
console.log('[demo] 自动设置 iframe src:', src)
|
||
})
|
||
|
||
loadBtn.onclick = () => {
|
||
const typedUrl = urlInput.value.trim()
|
||
const base = './vocd.html'
|
||
const src = typedUrl
|
||
? `${base}?filePath=${encodeURIComponent(typedUrl)}&mode=edit`
|
||
: `${base}?mode=edit`
|
||
editorFrame.src = src
|
||
console.log('[demo] 设置 iframe src:', src)
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|