时间戳

首页 > 解决方案 > 有没有办法在将项目添加到 HTML 文件中的 DOM 之前拦截它们

javascript - 有没有办法在将项目添加到 HTML 文件中的 DOM 之前拦截它们

问题描述

我不认为我想要什么是可能的，但我想我还是会问！

有没有办法在初始 HTML 文件中抓取内容，对其进行修改，然后在渲染之前将其添加到 DOM 中？

例如我有一个 HTML 文件：

<body>
    <div>Something here</div>
</body>

<div>有没有一种方法可以在解析 HTML 文件时将其添加到 DOM 之前进行拦截。

为了清楚起见，我不想在它已经添加到页面后对其进行修改。

再举一个例子，如果我有<img src="someimage.jpg">一种方法可以src在图像添加到 DOM 之前更改该属性，因此永远不会发出请求。

很高兴在 JS 中使用内联 JS <head>（好吧，如果这实际上是可能的，我认为无论如何我都必须这样做。）

我知道一旦我有一个服务人员，这一切都会变得任意，但我正在假设一个冷缓存并且没有外部文件（它主要是优化“首屏”内容）。

标签： javascripthtmlrendering

解决方案

防止 HTML 呈现的一种廉价且简单的方法是将其包装在<template>.

模板将在页面加载期间像任何普通的 HTML 一样被解析，但是放在不同documentFragment的 s 中而不是被渲染，等待在您准备好渲染时被操作、克隆或插入到您想要的任何地方。

HTTP 请求不会触发。

<template id="some_tpl">
  <img src="someimage.jpg">
</template>

const template = document.getElementById('some_tpl');
const templateContent = template.content;
document.body.appendChild(templateContent);

推荐阅读