通过javascript检索带有外部js / css / images的整个html

Question

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

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

Javascript可以实现吗？

任何帮助将不胜感激。

Answer 1

简短答案-否

不，JavaScript无法实现，尤其是“保存”部分，因为JavaScript在浏览器环境中没有文件访问权限（我们在此处假设），除非开发浏览器扩展或明确修改浏览器的安全属性以允许这样做。 。

---

长答案-如果您必须实现：漫长而曲折的道路...

加载正确的内容

首先，您需要确定是要获取静态状态的页面（由服务器在第一次加载页面时发送的页面），还是要获取其当前呈现的状态（在浏览器中呈现的页面和该脚本之后）的页面已执行并且可能已向页面添加内容） 。

加载资源

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

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

更新所有参考

接下来，您需要弄清楚如何组织“下载的”内容，以及在何处放置资源以及​​如何命名资源以避免冲突。

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

将内容写入磁盘

现在，最后一步是使用浏览器的自定义API或HTML5文件系统API将所有这些资源保存到磁盘。

• 探索HTML5 FileSystem API
• 关于FileSystem API的基本概念

---

龙在这里

所有这些都不能保证您将实现所需的功能，因为某些页面可能仍然包含这样下载的代码后无法正常工作。 可能会有代码从远程URL请求内容，或者假设某些目录结构和端点，或者使用您可能已修改的资源名称，等等。（这很奇怪，但并不罕见）。