在浏览器中使用JavaScript将HTML页面的所有外部资源嵌入到单个文件中 [英] Embedding all the external resources of an HTML page into a single file using javascript in the browser

问题描述

大家都知道，像图片这样的外部资源可以使用base64编码嵌入到html文件中：

 << ; img src =data：image / png; base64，iVBORw0KGgoAAAANS .../> 
  

我正在寻找基于浏览器的纯JavaScript 方式来遍历一个html页面并将所有外部资源嵌入到文件中，所以当我说 $（html）。html（）时，它会返回页面的所有内容。甚至包括它的外部资源。

这样做很有意义，我试图使用服务器上的无头浏览器将网页下载到单个文件中。

解决方案

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

• https://github.com/remy/inliner


• https://github.com/jgallen23/grunt-inline-css


• https://github.com/ceee/grunt-datauri

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

As you all know, external resources, like images, can be embedded into the html file using base64 encoding:

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

I'm looking for a pure browser-based javascript way to traverse an html page and embed all the external resources into the file so when I say $("html").html(), it returns all the page's contents. Even including its external resources.

Just so it makes sense, I'm trying to download web pages into single files using a headless browser on my server.

解决方案

There are tools out there to do that. Examples:

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

While there are benefits to this approach, remember that a page visited more than once, or site with multiple pages with same JS/CSS files will enjoy client (browser) side caching.

这篇关于在浏览器中使用JavaScript将HTML页面的所有外部资源嵌入到单个文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！