![如何完整下载网页并保留其功能?](https://linux22.com/image/1491273/%E5%A6%82%E4%BD%95%E5%AE%8C%E6%95%B4%E4%B8%8B%E8%BD%BD%E7%BD%91%E9%A1%B5%E5%B9%B6%E4%BF%9D%E7%95%99%E5%85%B6%E5%8A%9F%E8%83%BD%EF%BC%9F.png)
我一直在努力挽救这我用我所知道的所有方法修复了网页,但到目前为止,这些方法都没有奏效。该网站本身具有一些很棒的功能。它能够实时呈现 MathJax,没有任何明显的延迟。我希望能够离线使用它,所以我想保存它。我没有成功。我在 MacOS 上。以下是我到目前为止尝试过的方法:
- 在 Safari 上另存为 Web 存档 (.webarchive) – 不保留页面的功能
- 在 Safari 上另存为页面源代码 (.html) – 完全搞乱了页面
- HTTrack – 不保留网页的功能
- 在 Chrome 上另存为网页,完整版 (.html) – 布局和功能混乱
- WebDumper – 给出“禁止”错误
- itsucks – 弄乱网页
- SiteSucker – 弄乱网页
- ScrapBook (firefox) – 混乱
- 还有一些其他的事情我已经记不清了。
我只想保存网站并能够离线使用。然而,我注意到一些有趣的事情。当我在 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.0
URL 参数。然后,您需要更改网站的脚本和 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
- 清除您正在使用的浏览器的缓存。
- 打开浏览器并转到您想要下载的网站。
- 打开缓存的文件夹。
- 将所有文件下载到 (etc) 所在的同一文件夹中
index.html/xml/
。 - 离线并测试下载的页面。