时间戳

首页 > 解决方案 > 如何在加载完成之前获取 body 的 innerHTML？

javascript - 如何在加载完成之前获取 body 的 innerHTML？

问题描述

我有一个 HTML 正文，我想在加载完成之前获取其完整的内部 HTML 代码。

<body someproperties>
     <!--- some elements --->
     <script>
         var html = getFullInnerHTMLsomeWay();
     </script>
     <!--- some elements --->
</body>

所以，问题是，我怎样才能在它的所有子加载之前获得它的完整内部 HTML 代码？我尝试了很多想法，但还没有成功。我也尝试用谷歌搜索，但没有发现任何帮助。

编辑：我的目标是在显示给用户之前将指定文本的所有实例替换为另一个文本。

标签： javascript

解决方案

元素第一次变得可交互（例如，可以从 DOM API 和用户查看）是在浏览器将它们插入 DOM 时。

给定

<body someproperties>
     <!--- some elements 1 --->
     <script>
         console.log(document.body.innerHTML);
     </script>
     <!--- some elements 2 --->
</body>

你会得到some elements 1, 以及 script 标签的内容，但是没有办法得到some elements 2，因为它还没有被加载。

您将只能some elements 2在<script>标签执行完毕后获取。

我能想到做这样的事情的唯一方法是完全停止页面加载，fetch当前页面，然后解析响应，然后最后将响应加载到当前页面中 - 这将非常令人费解，而且我根本不推荐它。

这并不完全符合您的要求，但如果需要，您可以在 HTML 显示之前更改或查看它 - 使用 MutationObserver 来观察body.

new MutationObserver(() => {
  // examine DOM here
  // can add and remove nodes as needed, before they get rendered
})
  .observe(document.body, { childList: true });

推荐阅读