Как получить полностью вычисленный HTML (вместо исходного HTML)? - PullRequest
Новая
       0

Как получить полностью вычисленный HTML (вместо исходного HTML)?

33 голосов
/ 16 июня 2011

Учитывая веб-страницу, которая использует много javascript для генерации своего HTML, как я могу получить окончательный вычисленный HTML, анализируемый браузером вместо исходного HTML? Другими словами, предположим, что страница содержит множество тегов, окружающих функции javascript, которые при вызове возвращают некоторый HTML. Когда я просматриваю исходный код страницы, я вижу вызов функции скрипта, а не HTML, который он создает.

Как я могу получить весь HTML, созданный веб-страницей?

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

Обновление:

Спасибо за все ответы. Тем не менее, я все еще не получаю HTML, который вижу в консоли Firebug, ни с одним из этих методов. Для моего примера страницы я использую вкладку «Информация» моего собственного профиля Facebook. Если вы посмотрите исходный код на этой странице, вы увидите множество скриптов с заголовком «big_pipe.onPageletArrive ()». Однако, если вы посмотрите на это в Firebug, каждый из этих вызовов функций отрисовывается в HTML. Я попробовал щелкнуть правой кнопкой мыши тэг в Firebug, просмотреть сгенерированный источник на панели инструментов Webdev и предложение Chrome, но все они дают мне вызов сценария, а не HTML.

Есть еще идеи?

Обновление 2:

Когда я сказал, что каждая из этих функций отрисовывает HTML в Firebug, я был не совсем прав. Они выводятся, только если я выберу их на странице и щелкну правой кнопкой мыши -> Проверить элемент. Тогда, кажется, сделать это. Поэтому, возможно, у меня возник вопрос, как заставить Firebug автоматически отображать весь HTML-код, чтобы вы могли выбрать и сохранить его? (Или я открыт для любого другого решения для захвата этого HTML).

Ответы [ 4 ]

24 голосов
/ 16 июня 2011

На вкладке HTML в Firebug вы можете щелкнуть правой кнопкой мыши элемент <html> и нажать «Копировать HTML».

Вы можете сделать то же самое с Инструментами разработчика в Chrome / Safari.

14 голосов
/ 16 июня 2011

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

1 голос
/ 14 сентября 2018 
with (window.open("")) {
    document.open("text/html");
    document.write("<!--\n"); //for live version delete this line
    document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
    document.write("\n//-->"); //for live version delete this line
    document.close();
    document.title = "DOM Snapshot:" + opener.document.title;
    focus();
}
  1. Открытая консоль
  2. скопируйте, вставьте вышеуказанный код и выполните
  3. открывает пустую страницу,
  4. теперь проверяйте страницу правой кнопкой мыши или f12,
  5. скопировать externalhtml комментария
  6. вставьте куда хотите
  7. опционально удалить комментарий в начале и конце

Если вам нужна живая версия с возможностью нажатия, просто пропустите теги комментариев в приведенном выше коде.

0 голосов
/ 16 июня 2011

Это вообще невозможно.Вот отрывок из моего букмарклета, который использует нестандартные outerHTML: 

with (window.open("")) {
    document.open("text/html");
    document.write("");
    document.write(opener.document.documentElement.outerHTML.replace(//g, ">"));
    document.write("
"); document.close (); document.title =" Снимок DOM: "+ opener.document.title; focus ();}

Примечание: DTD отсутствует и не может быть извлечен вообще.

...