javascript - 通过 javascript 使用外部 js/css/images 检索整个 html

Question

我已经有一个 Javascript 文件(执行某些功能)，它将被附加到网页上。现在我希望 Javascript 收集整个网页及其 html 标签、图像、外部 Javascript 文件和外部 css 文件。 我不想在这里使用 Jquery/任何其他外部库。

我的动机是获取整个网页，将其保存并显示为与原始网页相似。

这可以用 Javascript 实现吗？

任何帮助将不胜感激。

Answer 1

简短回答 - 否

不，使用 JavaScript 是不可能的，尤其是“保存”部分，因为 JavaScript 在浏览器环境中没有文件访问权限(我们在此假设)，除非在开发浏览器扩展程序或明确修改浏览器的安全属性时允许这样做。

---

长答案 - 如果你真的必须:漫长而曲折的道路......

加载正确的内容

首先你需要弄清楚whether you want to fetch the page in its static status (as it is sent by the server on the first page load), or in its currently rendered status (after it's been rendered in the browser, and that scripts have executed and may have added content to the page) .

加载资源

然后您需要遍历 DOM 的所有元素，并获取所有外部资源(包括 CSS 文件中引用的资源)。

您可能希望在您的请求中使用 HTML 或纯文本 mime 类型获取所有资源，否则您的浏览器可能会触发带有最终用户弹出窗口的可见下载，并且根本不会执行您的透明下载。

更新所有引用

接下来，您需要弄清楚您希望如何组织“下载的”内容、将资源放在哪里以及如何命名它们以避免冲突。

完成后，您需要再次遍历所有 DOM 元素并更新引用以使用本地资源的路径而不是本地资源。

将内容写入磁盘

现在最后一点是将所有这些资源保存到磁盘，使用浏览器的自定义 API 或 HTML5 File System APIs .

• Exploring the HTML5 FileSystem APIs
• Basic Concepts about the FileSystem API

---

这里有龙

这些都不能保证您会达到您想要的效果，因为某些页面可能仍然包含代码，这些代码一旦像这样下载后将无法正常运行。可能有代码从远程 URL 请求内容或假定某些目录结构和端点，或使用您可能已修改的资源名称等...(这很奇怪，但并不罕见)。