feat(iframe): 添加通过URL参数filePath自动加载文件功能

新增demo页面展示iframe加载功能添加测试数据文件public/test.ocd
2025-11-19 15:32:54 +08:00 · 2025-11-19 15:32:54 +08:00 · 41313ac835
commit 41313ac835
parent e78b66bb95
3 changed files with 638 additions and 0 deletions
--- a/demo.html
+++ b/demo.html
@ -0,0 +1,71 @@
+<!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>父页面（同源）加载子页面 index.html（支持 ?filePath=URL）</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>
+    </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')
+      const fileInput = document.getElementById('fileInput')
+
+      function setFrameSrc(fileUrl) {
+        const src = `./index.html?filePath=${encodeURIComponent(fileUrl)}`
+        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>
--- a/public/test.ocd
+++ b/public/test.ocd
--- a/src/main.ts
+++ b/src/main.ts
@ -66,6 +66,34 @@ window.onload = function () {
  // cypress使用
  Reflect.set(window, 'editor', instance)

+  // 通过 URL 参数 filePath 自动打开同源文件（iframe 场景）
+  const params = new URLSearchParams(window.location.search)
+  const filePath = params.get('filePath')
+  if (filePath) {
+    const url = new URL(filePath, window.location.href).toString()
+    fetch(url)
+      .then(res => res.text())
+      .then(text => {
+        try {
+          let editorData
+          try {
+            editorData = JSON.parse(text)
+          } catch {
+            editorData = { main: [{ value: text }] }
+          }
+          instance.command.executeSetValue(editorData)
+          console.log('[iframe] 根据 filePath 加载完成:', url)
+        } catch (err) {
+          console.error('[iframe] 加载失败:', err)
+          alert('通过参数加载文件失败，请检查格式与同源权限')
+        }
+      })
+      .catch(err => {
+        console.error('[iframe] 获取文件失败:', err)
+        alert('无法获取 filePath 指定的文件')
+      })
+  }
+
  // 菜单弹窗销毁
  window.addEventListener(
    'click',