### [跨页加载指定 div：fetch 与 DOMParser](https://www.huociguo.com/article/1578)

**Published:** 2026-10-01T10:43:46

**Author:** 米了

**Excerpt:** 跨页复用一块内容时，先取文本再解析出目标节点，比 iframe 与 innerHTML 拼接更可控。含写法与三…

跨页复用一块静态内容时，用 iframe 会带进整套样式与滚动条，用 innerHTML 拼接又容易把对方的标签原样执行。先取文本再解析出目标节点，是更可控的一条路径。

![屏幕上显示程序代码，用于说明跨页面加载指定内容的写法](https://api.huociguo.com/wp-content/uploads/2026/10/d1.jpg)

取文本再解析，比直接搬标签更安全

## 写法

```js
async function loadNotice(target) {
  const res = await fetch('/fragments/notice.html');
  const html = await res.text();

  const doc = new DOMParser().parseFromString(html, 'text/html');
  const node = doc.querySelector('#notice');

  target.textContent = node ? node.textContent.trim() : '';
}
```

`parseFromString` 得到的是独立文档对象，脚本不执行、图片与样式不加载，解析过程没有副作用。

## 三处要点

1.  只取 textContent。写入 `innerHTML` 会把来源页的标签与事件属性一并搬过来，注入面随之扩大。
2.  目标选择器要稳定。id 优先，其次是不带随机后缀的类名，避免依赖层级路径。
3.  跨域受同源策略约束。目标与当前页不同源时，服务端需返回 `Access-Control-Allow-Origin`，否则 fetch 直接失败，这一层没有前端绕过手段。

## 保留格式的取舍

来源内容需要保留加粗、链接等富文本结构时，纯文本注入不再够用，此时先过一遍白名单过滤，再把结果写入。过滤规则放在前端或服务端都可以，但不要跳过这一步直接写入。

## 什么时候不走前端

页面由服务端渲染时，直接 include 片段更省事，也少一次请求。前端取内容适合公告、说明这类不常变且纯文本的块，以及静态部署、没有后端模板可用的场合。

**Tags:** DOMParser, DOM操作, fetch, 内容注入, 前端安全

**Categories:** HTML5

---