feat: 添加部署脚本并简化iframe加载逻辑

refactor(demo): 移除文件上传功能,仅支持URL拼接加载
refactor(main): 根据URL参数动态设置编辑模式
chore: 在package.json中添加部署相关脚本
This commit is contained in:
hanshiyang committed 2025-11-19 16:08:27 +08:00
1 parent 41313ac835
commit 1c14e28469
3 files changed
+57 -75

No files matched your search

+10 -40
View File
@@ -14,12 +14,11 @@
</style>
</head>
<body>
<h3>父页面(同源)加载子页面 index.html(支持 ?filePath=URL)</h3>
<h3>父页面通过地址拼接加载子页面(filePath + mode=edit)</h3>
<div class="panel">
<input id="urlInput" type="text" placeholder="输入同源文件URL或留空使用示例…" />
<input id="fileInput" type="file" accept=".json,.txt,.ocd" />
<button id="loadBtn">在 iframe 中打开</button>
<small>支持传入 JSON(完整编辑器数据)或纯文本(作为正文)。文件将以 blob: URL 形式传递,保证同源。</small>
<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>
@@ -27,45 +26,16 @@
const editorFrame = document.getElementById('editorFrame')
const loadBtn = document.getElementById('loadBtn')
const urlInput = document.getElementById('urlInput')
const fileInput = document.getElementById('fileInput')
function setFrameSrc(fileUrl) {
const src = `./index.html?filePath=${encodeURIComponent(fileUrl)}`
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)
}
loadBtn.onclick = async () => {
const typedUrl = urlInput.value.trim()
if (typedUrl) {
// 直接使用同源URL
try {
// 试探一次,确保地址有效(可选)
await fetch(new URL(typedUrl, window.location.href))
setFrameSrc(typedUrl)
return
} catch (e) {
alert('无法访问该URL,请确认同源且可访问')
return
}
}
const file = fileInput.files && fileInput.files[0]
if (file) {
// 将本地选择的文件转为 blob: URL(同源),传给子页
const blobUrl = URL.createObjectURL(file)
setFrameSrc(blobUrl)
return
}
// 示例:使用内置示例JSON字符串构造 Blob
const example = {
main: [{ value: 'Hello from iframe demo' }]
}
const blob = new Blob([JSON.stringify(example)], { type: 'application/json' })
const blobUrl = URL.createObjectURL(blob)
setFrameSrc(blobUrl)
}
</script>
</body>
</html>