必须同时在 dragover 和 drop 事件中调用 event.preventDefault()，否则 dataTransfer.files 为空；优先使用 dataTransfer.items 区分文件与 HTML 片段；读文本文件推荐 file.text()；解析 HTML 前需用 DOMParser 消毒并清除 script 和内联事件。
drop 事件里拿不到 dataTransfer.files 怎么办
不是代码写错了，是事件链断了——dragover 和 drop 两个事件都必须调用 event.preventDefault()，缺一不可。浏览器默认会拦截拖放行为，只有在这两个事件中都阻止默认动作，dataTransfer.files 才可访问。
常见错误现象：
-
dragenter里调preventDefault()—— 没用，不触发文件列表填充 - 只绑了
drop，没绑dragover——files始终为空 - 用 Chrome 拖标签页测试 —— 它不进
dataTransfer.files，只走dataTransfer.types的 text/uri-list 路径
实操建议：
- 统一在
dragover和drop回调开头加e.preventDefault() - 加个简单日志：
console.log('files:', e.dataTransfer.files.length)，确认是否真有文件 - 移动端（iOS Safari）完全不支持，必须 fallback 到
读 HTML 文件内容该用 file.text() 还是 FileReader
file.text() 是更直接、更安全的选择，尤其对文本类文件。它返回 Promise，自动处理 BOM 和 UTF-8 编码，无需手动解码；而 FileReader 需要自己写 onload 回调、处理 error、管理状态，容易漏掉异常分支。
使用场景差异：
- 想快速获取 HTML 字符串做解析 → 用
file.text()+await - 需要分块读取超大文件（如 >100MB 日志）→ 用
FileReader.readAsArrayBuffer()+TextDecoder - 只是预览图片或生成缩略图 → 别读内容，用
URL.createObjectURL(file)，更快更省内存
注意：file.text() 在 Safari 15.4+、Chrome 84+、Firefox 78+ 支持良好；若需兼容旧版，才退回到 FileReader。
用 DOMParser 解析 HTML 片段时怎么防 XSS
直接 innerHTML = htmlString 或 document.adoptNode() 后挂载，都会执行内联脚本和事件处理器，等于主动引入 XSS。正确做法是先“消毒”，再提取节点。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操步骤（顺序不能乱）：
- 用
new DOMParser().parseFromString(htmlString, "text/html")创建独立文档上下文 - 移除所有
<script></script>：doc.querySelectorAll("script").forEach(s => s.remove()) - 清除内联事件：
doc.body.querySelectorAll("[onerror],[onclick],[onload]").forEach(el => { el.removeAttribute("onerror"); el.removeAttribute("onclick"); el.removeAttribute("onload"); }) - 只取
doc.body.children或doc.body.firstElementChild，别用doc.documentElement—— 它含 head，可能带危险 link 或 base 标签
性能提示：DOMParser 不会加载外部资源（比如 不发请求），但若 HTML 含大量嵌套节点，解析本身有开销，建议对 file.size > 2MB 的文件加限流或提示。
dataTransfer.items 和 dataTransfer.files 该选哪个
优先用 dataTransfer.items，它是现代标准，能区分“拖入文件”和“拖入 HTML 片段”（比如从编辑器复制的富文本），而 files 只管磁盘文件。
典型判断逻辑：
- 遍历
items，对每个item调item.getAsFile()→ 得到 File 对象（适用于真实文件） - 若
item.kind === 'string'且item.type === 'text/html'→ 直接item.getAsString()拿 HTML 字符串（免读文件，更快） - fallback 到
dataTransfer.files：仅当items为空或全为非 string 类型时启用
容易被忽略的一点：某些编辑器（如 Obsidian、Typora）拖出的 HTML 内容走的是 items 路径，不是 files；如果只监听 files，这类内容就永远读不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
