javascript - 在浏览器中使用 javascript 将 HTML 页面的所有外部资源嵌入到单个文件中

Question

众所周知，可以使用base64编码将外部资源(例如图像)嵌入到html文件中:

<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." />

我正在寻找一种纯基于浏览器的 javascript 方法来遍历 html 页面并将所有外部资源嵌入到文件中，所以当我说 $("html"). html()，它返回页面的所有内容。甚至包括其外部资源。

这很有意义，我正在尝试使用服务器上的 headless 浏览器将网页下载到单个文件中。

Answer 1

有一些工具可以做到这一点。示例:

• https://github.com/remy/inliner
• https://github.com/jgallen23/grunt-inline-css
• https://github.com/ceee/grunt-datauri

虽然这种方法有很多好处，但请记住，不止一次访问过的页面，或者具有多个具有相同 JS/CSS 文件的页面的站点将享受客户端(浏览器)端缓存。