如何以预期的可查看格式完整保存使用 JavaScript 的现代网页(例如 Facebook),以便完全离线查看?

如何以预期的可查看格式完整保存使用 JavaScript 的现代网页(例如 Facebook),以便完全离线查看?

当我为一个项目建立参考资料档案时,我在保存网页时遇到了麻烦。

一些网页(较旧的论坛或具有简单格式的博客页面)可以使用标准浏览器中常用的“保存完整网页”选项顺利保存。

但这个主题的大部分内容都是用户在 Twitter 和 Facebook 等社交媒体页面上提交的帖子,这些帖子需要其他内容。必须包含评论、视频和图像等内容,格式被破坏,内容无法阅读。这是因为现代页面严重依赖 javascript,需要保存。

如何保存网页以供离线查看,并使其与在线查看时完全相同?显然,我并不指望链接能够正常工作,我可以忍受单独翻录视频内容,但我需要图像和格式与在线查看时相同。

Wayback Machine 不可靠。此备份必须处于离线状态。遗憾的是,我无法将网站打印为 PDF,因为它无法捕获大多数图像。

答案1

可能永远不会有一个适用于所有页面的解决方案。尝试尽可能准确地保存/存档网页时需要考虑多个因素(例如,正如您提到的视频),但最重要的是,“无限滚动”可能是导致您出现问题的原因。

Twitter 和 Facebook(正如你所说,“现代网络应用”)都使用 JavaScript 在你滚动时不断从后端加载新数据。你已经在页面“顶部”看到的数据通常会被删除,以保持流畅而不出现延迟(当然,直到你向上滚动)。下面的数据尚未加载。

这意味着浏览器本身只“知道*当前视图上、略高于和略低于的信息。当您保存或打印为 PDF 时,只会处理这些信息。

任何试图保存或打印无限滚动页面的系统都永远不会完成;-)。

您在问题中提到的另一个问题是,图像本身可以托管在任何网站,这些图片可以被删除或移除。要真正捕捉页面的状态,您需要一个解决方案,要么将图片下载到本地,并更新链接以指向本地相对路径;要么您需要一种可以包含图片的格式(例如 PDF 或图片)。

就解决方案而言,两者都不是完美的,但我建议:

  • 打印为 PDF
  • Vivaldi 网络浏览器(也是基于 Chrome)能够使用屏幕捕获工具将“页面”捕获为图像。我经常在 Stack Exchange 网站上使用它(当然,这些网站没有无限滚动功能)。

当然,无论使用哪种方法,您都需要弥补无限滚动的缺点。您需要滚动到页面中需要存档的位置,然后捕获/打印它,然后向下滚动以加载更多数据并重复此操作。

如果打印为 PDF,还请确保在打印对话框中打开“背景图像”。


Vivaldi 截取此页面的示例:

Vivaldi 截取此页面的示例

最大的问题是标题栏总是“浮动”并遮盖部分内容。在这种情况下,站点标题被遮住了。


Vivaldi 捕获 Twitter 主页的示例:

Twitter 主页

同样,浮动工具栏总是会遮挡某些东西。除此之外,主要问题是只捕获了当前视口。下面有很多空白空间尚未加载。但是,捕获的内容与屏幕上的显示内容基本一致。

相关内容