hanshiyang
1c14e28469
refactor(demo): 移除文件上传功能，仅支持URL拼接加载 refactor(main): 根据URL参数动态设置编辑模式 chore: 在package.json中添加部署相关脚本
41 lines
1.7 KiB
HTML
41 lines
1.7 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：index.html?filePath=URL&mode=edit</small>
|
||
</div>
|
||
<iframe id="editorFrame" src="./index.html" referrerpolicy="no-referrer"></iframe>
|
||
|
||
<script>
|
||
const editorFrame = document.getElementById('editorFrame')
|
||
const loadBtn = document.getElementById('loadBtn')
|
||
const urlInput = document.getElementById('urlInput')
|
||
|
||
loadBtn.onclick = () => {
|
||
const typedUrl = urlInput.value.trim()
|
||
const base = './index.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> |