Как захватить содержимое / состояние html времени выполнения со всеми примененными стилями и удаленным JavaScript - PullRequest
Новая
       28

Как захватить содержимое / состояние html времени выполнения со всеми примененными стилями и удаленным JavaScript

5 голосов
/ 18 января 2012

Сокращенная версия Вопроса

Есть ли способ захвата HTML времени выполнения (текущего состояния домена) со всеми стилями, примененными / встроенными на динамической (ajax / javascript) веб-странице?

Более длинная версия

Я хотел бы сохранить текущее состояние домена как отдельную HTML-страницу со всеми стилями, либо обернутыми в тег * <style>или стили, встроенные.

Аналогично, мне нужно что-то, что напоминает файл coredump (который отображает текущее состояние приложения), но в этом случае (html) файл, который можно загрузить в браузер для просмотра / отладки.

Эта задача была бы довольно простой, если на странице нет javascript.

  • Do File->Save Page As -> html complete из веб-браузера
  • Или используйте такие инструменты, как http://www.httrack.com или curl, чтобы загрузить страницу и все связанные изображения

Ниже приведен список того, что можно сделать, чтобы сделать то же самое программно (хотя и не полностью)

  • получить html-содержимое
  • удалить все теги и атрибуты onXXX из каждого, как onclick
  • получить * .css содержимое
  • вставлять стили CSS в <style>
  • изменить все пути к изображениям на относительные
  • сохранить все изображения

Но когда для построения страницы используется javascript или если при загрузке / щелчке изменяется состояние страницы, как некоторые элементы скрыты, а компоновка страницы изменяется, вышеуказанные методы не могут быть использованы.

Итак, как сохранить текущее состояние веб-страницы (с включенным динамическим JavaScript)?

Если такой метод / инструмент / плагин существует, было бы удобно по электронной почте / поделиться страницей с кем-тоу кого нет доступа к интернету или веб-приложению

Ответы [ 2 ]

0 голосов
/ 18 января 2012

Относительно того, как вы можете получить текущее состояние DOM.

Вы можете использовать .html () jQuery для получения текущего DOM. 

var DOMState = $('html').html();

Вы можете написатьбукмарклет, который вводит jquery (см. http://blog.reybango.com/2010/09/02/how-to-easily-inject-jquery-into-any-web-page/ для примера), а затем захватывает html.

0 голосов
/ 18 января 2012

Итак, я предполагаю, что вы хотите сделать это на рабочем столе? Тогда я бы использовал браузер без заголовка, например, phantomjs, и отключил межсайтовый скриптинг. Напишите javascript, который загрузит ваш целевой URL в iframe, получит его и сохранит в файл. Вам все равно нужно будет сохранить весь CSS вручную, не зная, как его встроить.

...