☰

如何完整下载网页并保留其功能？

tag-icon • tag-icon macos browser download website webpage
如何完整下载网页并保留其功能？

我一直在努力挽救这我用我所知道的所有方法修复了网页，但到目前为止，这些方法都没有奏效。该网站本身具有一些很棒的功能。它能够实时呈现 MathJax，没有任何明显的延迟。我希望能够离线使用它，所以我想保存它。我没有成功。我在 MacOS 上。以下是我到目前为止尝试过的方法：

  1. 在 Safari 上另存为 Web 存档 (.webarchive) – 不保留页面的功能
  2. 在 Safari 上另存为页面源代码 (.html) – 完全搞乱了页面
  3. HTTrack – 不保留网页的功能
  4. 在 Chrome 上另存为网页，完整版 (.html) – 布局和功能混乱
  5. WebDumper – 给出“禁止”错误
  6. itsucks – 弄乱网页
  7. SiteSucker – 弄乱网页
  8. ScrapBook (firefox) – 混乱
  9. 还有一些其他的事情我已经记不清了。

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

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

答案1

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

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

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

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

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

Loading failed for the <script> with source “file:///D:/Home/Downloads/hostmath
/HostMath%20-%20Online%20LaTeX%20formula%20editor%20and%20browser-
based%20math%20equation%20editor_files/extensions/asciimath2jax.js?rev=2.6.0”

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

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

如果有任何 JavaScript 向网络发出请求，你就会陷入死胡同服务（API）在主机网站上。这样做是为了减轻网站无法在 Web 浏览器中本地计算的计算负担，这意味着后端基本的运行前端。

答案2

浏览器插件：保存页面 WE 火狐/铬合金

一个比下面提到的 web-recorder 更轻量级的 Firefox/Chrome 插件，适用于部分用例。可配置、灵活，并且可以选择性地滚动页面以检索延迟加载的内容。它将图像、脚本、字体等内联为数据 URL，从而生成单个大型独立 HTML 文件。

浏览器插件：网上剪贴簿 火狐/铬合金

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

Chrome 扩展程序和独立应用程序：网络记录器

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

注意：WebRecorder 将不是以易于解析的格式保存页面的原始标记；它使用自己的格式来存储数据，如果您喜欢摆弄数据，这并不容易提取所需的位。

笔记：WebRecorder 在一些中等复杂程度的网站上运行良好，但不是保存一些依赖大量 JavaScript 并使用 react、angular、vue 等框架构建的网站的预期内容（适用于所有提到的工具）

答案3

打开您要浏览的网站。任何网络浏览器都可以快速浏览您当前正在访问的网站。... 打开“将网页另存为”窗口。... 调用已保存的网页。... 选择存储网页的位置。... 选择是否需要整个网页或仅需要 HTML。... 打开已保存的网页。

答案4

  1. 清除您正在使用的浏览器的缓存。
  2. 打开浏览器并转到您想要下载的网站。
  3. 打开缓存的文件夹。
  4. 将所有文件下载到 (etc) 所在的同一文件夹中index.html/xml/。
  5. 离线并测试下载的页面。

相关内容