74 lines
3.3 KiB
HTML
74 lines
3.3 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" />
|
||
<label style="display:flex;align-items:center;gap:6px;">
|
||
<input id="editModeToggle" type="checkbox" />
|
||
<span>编辑模式（勾选则拼接 mode=edit，不勾选为只读）</span>
|
||
</label>
|
||
<button id="loadBtn">设置 iframe 地址</button>
|
||
<small>示例：vocd.html?filePath=URL&mode=edit 或 vocd.html?filePath=URL</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')
|
||
const editModeToggle = document.getElementById('editModeToggle')
|
||
|
||
function buildSrc(filePath, isEdit) {
|
||
const base = './vocd.html'
|
||
return `${base}?filePath=${encodeURIComponent(filePath)}` + (isEdit ? '&mode=edit' : '')
|
||
}
|
||
|
||
// 页面加载后，自动将 iframe 指向 vocd.html 并使用同源 /test.ocd
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const defaultUrl = '/test.ocd' // 来自 public，同源可直接访问
|
||
urlInput.value = defaultUrl
|
||
const base = './vocd.html'
|
||
// 默认不勾选：只读模式（不拼接 mode）
|
||
editModeToggle.checked = false
|
||
const src = buildSrc(defaultUrl, editModeToggle.checked)
|
||
editorFrame.src = src
|
||
console.log('[demo] 自动设置 iframe src:', src)
|
||
})
|
||
|
||
// 切换编辑模式时，刷新 iframe 地址，保留当前 filePath
|
||
editModeToggle.addEventListener('change', () => {
|
||
const typedUrl = urlInput.value.trim()
|
||
const currentAbs = editorFrame.src || './vocd.html'
|
||
const currentUrl = new URL(currentAbs, window.location.href)
|
||
const currentFilePath = currentUrl.searchParams.get('filePath') || (typedUrl || '/test.ocd')
|
||
const src = buildSrc(currentFilePath, editModeToggle.checked)
|
||
editorFrame.src = src
|
||
console.log('[demo] 编辑模式切换，刷新 iframe src:', src)
|
||
})
|
||
|
||
loadBtn.onclick = () => {
|
||
const typedUrl = urlInput.value.trim()
|
||
const base = './vocd.html'
|
||
const targetUrl = typedUrl || '/test.ocd'
|
||
const src = buildSrc(targetUrl, editModeToggle.checked)
|
||
editorFrame.src = src
|
||
console.log('[demo] 设置 iframe src:', src)
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|