feat: 添加部署脚本并简化iframe加载逻辑
refactor(demo): 移除文件上传功能,仅支持URL拼接加载 refactor(main): 根据URL参数动态设置编辑模式 chore: 在package.json中添加部署相关脚本
This commit is contained in:
1 parent
41313ac835
commit
1c14e28469
3 files changed
+57
-75
No files matched your search
@@ -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>
|
||||
Reference in new issue
Block a user