如何完整下载网页，同时保留其功能？

Question

我一直在努力挽救这个网页，但到目前为止没有一个有效。该网站本身有一些很棒的功能。它能够实时渲染 MathJax，没有任何明显的延迟。我希望能够离线使用它，所以我想保存它。我还没有很成功。我使用的是 MacOS。这是我到目前为止所尝试过的：

\n\n

\n
1. 在 Safari 上另存为 Web 存档 (.webarchive) \xe2\x80\x93 不会保留页面的功能
\n
2. 在 Safari 上另存为页面源 (.html) \xe2\x80\x93 页面完全混乱
\n
3. HTTrack \xe2\x80\x93 不保留网页的功能
\n
4. 在 Chrome 上另存为网页，完整 (.html) \xe2\x80\x93 搞乱布局和功能
\n
5. WebDumper \xe2\x80\x93 给我一个“禁止”错误
\n
6. itsucks \xe2\x80\x93 弄乱了网页
\n
7. SiteSucker \xe2\x80\x93 弄乱网页
\n
8. ScrapBook (firefox) \xe2\x80\x93 搞砸了
\n
9. 还有一些我不记得了的事情。
\n

\n\n

我只想保存网站并能够离线使用它。然而，我注意到一些有趣的事情。当我在 Safari 中离线时，网页运行良好。这无疑意味着该网页可以毫无问题地离线运行 \xe2\x80\x93 我只需要一种方法来正确保存它。我想我可以创建一个虚拟机，在其上加载网站，然后将其保存为快照，并在我想要离线时使用它，但这对于这样一个看似简单的问题来说似乎是一个不成比例的解决方案。

\n\n

附注：是否可以保存这样的网页网页（iPhone 6S 页面），其中包含所有滚动动画、嵌入的图片和视频以及所有其他内容？我只尝试使用 Safari 创建 Web 存档，但它只保存了漂亮的滚动动画 \xe2\x80\x93 而不是嵌入的图片等。

\n

Answer 1

浏览器插件：保存页面 WE Firefox / Chrome

\n

一个 firefox/chrome 插件，比下面提到的网络记录器更轻，并且对于一部分用例来说效果很好。可配置、灵活，并且可以选择滚动页面以检索延迟加载的内容。它将图像、脚本、字体等内联为数据 URL，生成一个大的独立 HTML 文件。

\n

浏览器插件：WebScrapBook Firefox / Chrome

\n

同一任务的不同方法。可以递归下载链接页面到您可以指定的深度。高度可配置，可以通过 CSS 选择器从页面中删除垃圾。重写链接以指向本地下载的资源。缺点是没有“项目”的概念，因此您无法更新以前下载的网站。文件命名有些随意，与原站点上的文件不一致。需要对选项进行一些调整，直到它按照您想要的方式工作。在需要身份验证的站点上递归保存多个页面的少数选项之一。

\n

Chrome 扩展程序和独立应用程序：WebRecorder

\n

WebRecorder 是一个“高保真网络归档系统” https://github.com/webrecorder/archiveweb.page \xe2\x80\x94 它是一个开源项目，提供免费的基于 Electron 的桌面应用程序和 Chrome 扩展。向下滚动到桌面工具以获取应用程序下载链接（您无需创建帐户即可使用桌面应用程序）。

\n

\n
• https://github.com/webrecorder/webrecorder-desktop
\n
• Chrome 扩展程序
\n

\n

\n

注意：WebRecorder 不会以易于解析的格式保存页面的原始标记；它使用自己的格式来存储数据，这使得在您喜欢修改数据时无法轻松提取所需的位。

\n

\n

\n

^{注意：WebRecorder 在一些中等复杂度的网站上工作得很好，但没有保存一些大量使用 JavaScript 并使用 React、Angular、Vue 等框架构建的网站上的预期内容（适用于提到的所有工具）}

\n

\n

Answer 2

如今，许多网站都无法做到这一点。对于看起来可能的网站，它仍然需要一些 Javascript 经验来进行逆向工程和“修复”保存到计算机上的脚本。没有一种方法适用于所有网站，您必须解决尝试保存的每个网站的每个独特问题。

\n\n\n\n

许多网站不再只是从服务器发送到您的计算机的静态文件。它们已成为双向交互式应用程序，其中 Web 浏览器运行代码，从同一页面持续与 Web 服务器交互。

\n\n

当您在浏览器中加载网站时，您会看到组成该网站的整个系统的“前端”。这个“前端”（包括 HTML、图像、CSS 和 Javascript）甚至可以由其末端的代码动态生成！这意味着在服务器端执行的代码不会发送到您的 Web 浏览器，并且该代码对于支持发送到您的 Web 浏览器的代码可能至关重要。

\n\n

根本无法“下载”该服务器端代码，这就是为什么许多网站在保存时无法正常工作的原因。

\n\n

导致问题的最常见问题是网站在将初始页面响应发送到浏览器后使用 JavaScript 加载内容。您尝试离线保存的 HostMath 站点肯定使用后端来检索对该站点功能至关重要的 javascript 文件。在 Firefox 中，当我尝试本地打开站点时，多个不同的 javascript 文件出现此错误：

\n\n

Loading failed for the <script> with source \xe2\x80\x9cfile:///D:/Home/Downloads/hostmath\n/HostMath%20-%20Online%20LaTeX%20formula%20editor%20and%20browser-\nbased%20math%20equation%20editor_files/extensions/asciimath2jax.js?rev=2.6.0\xe2\x80\x9d\n

\n\n

看到?rev=2.6.0文件名后面的那个了吗？这是一个传递到后端（网络服务器）的参数，以确定asciimath2jax.js应将哪个文件发送到您的网络浏览器。我的D:驱动器不是网络服务器，因此当 Firefox 尝试加载带有 URL 参数的文件时，它会失败。

\n\n

您可以尝试手动从 HostMath 下载文件并将其保存在正确的位置，而不需要这样做?rev=2.6.0。然后，您需要更改站点的脚本和 HTML，以从驱动器加载文件，而不需要 URL 参数。必须对所有无法加载的脚本执行此操作。

\n\n

如果有任何 Javascript 向主机网站上的 Web服务（API）发出请求，您将陷入死胡同。这样做是为了卸载站点不在网络浏览器中本地计算的内容的计算，这意味着后端对于运行前端至关重要。

\n