Встраивание всех внешних ресурсов HTML-страницы в один файл с использованием JavaScript в браузере

Question

Как вы все знаете, внешние ресурсы, такие как изображения, могут быть встроены в html-файл с использованием кодировки base64:

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

Я ищу чистый основанный на браузере способ javascript для обхода html-страницы и встраивания всех внешних ресурсов в файл, поэтому, когда я говорю $("html").html(), он возвращает все содержимое страницы. Даже включая его внешние ресурсы.

Просто так имеет смысл, я пытаюсь загрузить веб-страницы в отдельные файлы, используя браузер без головы на моем сервере.

Answer 1

Есть инструменты для этого. Примеры:

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

Хотя у этого подхода есть свои преимущества, помните, что страница, посещенная более одного раза, или сайт с несколькими страницами с одинаковыми файлами JS/CSS будут пользоваться кэшированием на стороне клиента (браузера).

Answer 2

Достигнут переменный успех с и :

• Firefox: расширением Save Page WE для Firefoxhttps://addons.mozilla.org/en-US/firefox/addon/save-page-we/
• Chrome: Chromehttps://chrome.google.com/webstore/detail/save-page-we/dhhpefjklgkmgeafimnjhojgjamoafof/related

Это расширение может даже прокручивать или уменьшать страницу, чтобы разрешить отложенную загрузку ресурсов перед сохранением.

Также пробовал расширения, но они не делали то, что мне нужно, тогда как с этим мне удалось создать отдельный HTML-файл со всеми CSS/JS/изображениями, встроенными в виде URL-адресов данных.