domparser 不解析嵌入式 javascript 对象,仅保留空 script 节点;需手动提取 script 内容并用 json.parse()(推荐 type="application/json")或安全执行方式获取数据;iframe/object 中的对象受同源策略限制,须通过 postmessage 通信。

DOMParser 不解析嵌入式 JavaScript 对象
DOMParser 只处理 HTML/XML 字符串,它完全忽略 <script></script> 标签内的 JavaScript 代码。哪怕里面定义了 window.config = { theme: 'dark' },DOMParser 解析后只留下一个空的 <script></script> 元素节点,config 对象根本不会被创建或暴露。
想拿到这类嵌入对象,必须绕过 DOMParser,直接提取 <script></script> 内容字符串,再用 eval()、Function 构造器或 JSON.parse()(如果格式是纯 JSON)来执行或解析。
从 script 标签中安全提取对象数据
常见模式是把配置写在 <script type="application/json"></script> 或 <script id="config"></script> 里,避免执行任意 JS。
- 优先用
type="application/json":浏览器不执行它,内容可直接JSON.parse(script.textContent) - 若只能用普通
<script></script>,用正则粗略匹配const data = /window\.(\w+)\s*=\s*(\{[\s\S]*?\});/—— 但注意:正则无法可靠处理嵌套大括号、字符串转义、注释,仅适用于简单、受控场景 - 绝对不要对不可信来源的
<script></script>内容调用eval()或Function(),XSS 风险极高
iframe 和 object 加载的 HTML 中的对象不可跨域访问
如果嵌入是通过 <iframe src="page.html"></iframe> 或 <object data="widget.html"></object> 实现的,其中定义的 window.widgetData 默认无法从父页面读取。
- 同源时可用
iframe.contentWindow.widgetData,但需确保 iframe 已加载完成(监听load事件) - 跨域时受同源策略限制,父页拿不到子页的
window对象;必须由子页主动调用postMessage()发送数据,父页监听message事件接收 -
<object></object>的 contentDocument 支持更弱,部分浏览器不暴露,不建议依赖
真正“嵌入式对象”的解析取决于上下文
所谓“嵌入式对象”,实际分三类,处理方式完全不同:
-
<object data="data.json" type="application/json"></object>:浏览器不解析,只是占位;需 fetch 单独请求该 URL 再JSON.parse() -
<object data="chart.svg"></object>:SVG 是独立文档,其内部 JS(如有)在 SVG 上下文中运行,父页无法直接访问 -
<iframe src="report.html"></iframe>:整个 HTML 被加载为独立浏览上下文,它的全局对象与父页隔离
没有通用“HTML 解析引擎”能自动提取并合并所有这些对象——你得先明确对象在哪(script 内?JSON 文件?iframe 里?),再选对应路径,漏掉上下文判断,90% 的尝试都会静默失败。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











