跨页复用一块静态内容时，用 iframe 会带进整套样式与滚动条，用 innerHTML 拼接又容易把对方的标签原样执行。先取文本再解析出目标节点，是更可控的一条路径。
写法
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 得到的是独立文档对象，脚本不执行、图片与样式不加载，解析过程没有副作用。
三处要点
- 只取 textContent。写入
innerHTML会把来源页的标签与事件属性一并搬过来，注入面随之扩大。 - 目标选择器要稳定。id 优先，其次是不带随机后缀的类名，避免依赖层级路径。
- 跨域受同源策略约束。目标与当前页不同源时，服务端需返回
Access-Control-Allow-Origin，否则 fetch 直接失败，这一层没有前端绕过手段。
保留格式的取舍
来源内容需要保留加粗、链接等富文本结构时，纯文本注入不再够用，此时先过一遍白名单过滤，再把结果写入。过滤规则放在前端或服务端都可以，但不要跳过这一步直接写入。
什么时候不走前端
页面由服务端渲染时，直接 include 片段更省事，也少一次请求。前端取内容适合公告、说明这类不常变且纯文本的块，以及静态部署、没有后端模板可用的场合。