diff --git a/demo.html b/demo.html index c0ee9ad..75dbbbc 100644 --- a/demo.html +++ b/demo.html @@ -17,8 +17,12 @@

父页面通过地址拼接加载子页面(filePath + mode=edit)

+ - 仅拼接 iframe src:vocd.html?filePath=URL&mode=edit + 示例:vocd.html?filePath=URL&mode=edit 或 vocd.html?filePath=URL
@@ -26,23 +30,41 @@ 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' - const src = `${base}?filePath=${encodeURIComponent(defaultUrl)}&mode=edit` + // 默认不勾选:只读模式(不拼接 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 src = typedUrl - ? `${base}?filePath=${encodeURIComponent(typedUrl)}&mode=edit` - : `${base}?mode=edit` + const targetUrl = typedUrl || '/test.ocd' + const src = buildSrc(targetUrl, editModeToggle.checked) editorFrame.src = src console.log('[demo] 设置 iframe src:', src) }