Сохраните веб-сайт, содержащий javascript после его интерпретации

Есть веб-сайт, который я хочу сохранить, который содержит javascript (если это помогает, сайт vyou.com, вот ссылка на пользовательскую страницу Andrew WK ), которая обновляет содержимое того, что пользователь видит на веб-сайте. Я бы хотел сохранить сайт, как только список ссылок на видео ответы пользователя будет полностью расширен. Я не собираюсь также сохранять видео, к которым ведут ссылки, я просто хочу сохранить состояние, в котором находится мой браузер. Какой браузер я использую для меня неважно.

Кто-нибудь сделал что-то подобное или знает, как это сделать?

  • Мне нужно постоянно обновлять браузер, чтобы просматривать веб-страницу, а иногда вместо этого появляется только текст
  • Почему веб-страницы иногда появляются как обычный HTML перед обновлением
  • Все мои браузеры внезапно не поддерживают файлы Javascript?
  • Как выбрать гиперссылку в виде текста в браузере?
  • Полноэкранный браузер
  • Как искать текст во всех вкладках в Firefox?
  • Есть ли способ поиска текста моей истории просмотров в Firefox?
  • Что такое ограничение размера кеша по умолчанию для Chrome?
  • 3 Solutions collect form web for “Сохраните веб-сайт, содержащий javascript после его интерпретации”

    Есть (по крайней мере) две причины, по которым ваш сохраненный файл не будет выглядеть точно так же, как ваш живой веб-сайт, который вы сохранили:

    1. Некоторые или многие ссылки на изображения на странице могут быть «относительными» ссылками. Аналогично, ссылки на файлы «.css» и «.js» на странице могут быть «относительными» ссылками.
    2. Некоторые ссылки на изображения и другие файлы могут содержаться внутри этих файлов «.css» и «.js».

    Например, скажем, вы смотрите на страницу:

    http://example.com/something/index.php 

    На этой странице есть «относительная» ссылка на файл изображения:

     "../images/picture.jpg" 

    Также на этой странице есть «относительная» ссылка на файл .css:

     "../css/style.css" 

    Итак, когда вы сохраняете файл «.html» для страницы, он содержит эти «относительные» ссылки. Когда вы открываете сохраненную страницу в своем браузере, она ищет эти файлы изображений и css в папке, где вы сохранили файл .html. Если эти файлы с изображениями и css не находятся в папке, где вы сохранили файл .html, страница будет отображаться неправильно.

    Есть несколько вещей, которые вы можете сделать, чтобы «разрешить» это.

    1. Выберите File-->Save as...-->Webpage, complete (или аналогичную формулировку), когда вы сохраняете веб-страницу на своем компьютере. Это сохранит копию изображения и .css / .js файлов на вашем компьютере и изменит ссылку в сохраненном файле html, чтобы указать на изображение / файл на вашем компьютере. Это не «надежный». Кажется, что этот процесс часто «пропускает» некоторые файлы. В этом случае вам придется вручную найти и загрузить отсутствующие файлы и вручную отредактировать ссылки в сохраненном файле html, чтобы «указать» на файлы, сохраненные на вашем компьютере.
    2. Сохраните файл html как файл «Web-архив» («.mht»)
    3. Добавьте строку «base href …» в раздел <head> в сохраненной копии html-файла. Используя приведенный выше URL в качестве примера:

       http://example.com/something/index.php 

      Удалите «index.php» с URL-адреса веб-страницы:

       http://example.com/something/ 

      Добавьте это в раздел <head> в сохраненной копии веб-страницы, например:

       <Голова>
       <Base href = "http://example.com/something/">
       <...>
       <...>
       </ HEAD>
        ...
      


    Изменить (2013-04-04):

    Используя Internet Explorer, лучший способ (возможно, не идеальный), чтобы сохранить страницу, которая также сохраняет «результат» JavaScript на странице, заключается в использовании Microsoft Developer Tools , а затем просмотра и сохранения источника DOM для этой страницы.

    Я говорю «возможно, не идеальный» …

    Предположим, у вас есть веб-страница, которая использует JavaScript для «генерации» HTML-кода, который добавляет изображение на веб-страницу.

    Если вы просмотрите веб-страницу в Интернете, вы увидите изображение. Если вы просмотрите источник страницы ( View-->Source ) или сохраните источник страницы в файле ( File->Save as... ), вы увидите JavaScript, но вы не увидите HTML <img...> Код.

    Теперь, если вы используете Инструменты разработчика для просмотра и сохранения источника DOM для страницы, а затем откройте сохраненный файл в текстовом редакторе, вы увидите, что исходный JavaScript включен в сохраненный файл, а затем под JavaScript, вы будете См. Код <img...> который был сгенерирован JavaScript.

    Затем, если вы откроете сохраненную страницу в браузере, вы увидите изображение дважды. Это связано с тем, что при открытии сохраненной страницы JavaScript будет выполняться снова и сгенерировать код для показа изображения, а ниже – код HTML для изображения, сохраненного в файле.

    Вы можете «исправить» это, отредактировав сохраненный источник DOM, а затем удалите (или закомментируйте) JavaScript. Затем, когда вы открываете сохраненную страницу в браузере, вы увидите изображение только один раз.


    Изменить (2013-04-05):

    Похоже, что может возникнуть некоторая путаница в сохранении веб-страниц, содержащих относительные ссылки, из браузера, поэтому я решил представить рабочий пример.

    Вот веб-страница, которую я создал, чтобы продемонстрировать это:
    Фотографии Waterfall-Lighthouse

    Вот HTML-код этой страницы:

     <HTML>
     <Голова>
     <Title> Водопад и маяк </ title>
     </ HEAD>
     <Тело>
     <Img src = "../ images / imagesCAIPHDL5.jpg" /> <br />
     <br /> <hr align = "left" width = "284" /> <br />
     <Script type = "text / javascript"> document.write ("\ n" + '<img src = "../ images / imagesCAG7M85E.jpg" /> <br />'); </ script>
     </ Body>
     </ Html>
    

    Если вы просматриваете страницу с помощью браузера (я использую IE9), вы правильно видите ожидаемую веб-страницу с двумя картинками.

    При просмотре страницы вы можете сохранить исходный код страницы, щелкнув: « View-->Source , или нажав « File-->Save as...-->Webpage, HTML only . Затем сохраните файл. В любом случае, вы получите тот же код HTML:

     <HTML>
     <Голова>
     <Title> Водопад и маяк </ title>
     </ HEAD>
     <Тело>
     <Img src = "../ images / imagesCAIPHDL5.jpg" /> <br />
     <br /> <hr align = "left" width = "284" /> <br />
     <Script type = "text / javascript"> document.write ("\ n" + '<img src = "../ images / imagesCAG7M85E.jpg" /> <br />'); </ script>
     </ Body>
     </ Html>
    

    Но если вы просмотрите сохраненный файл в браузере, вы получите пустую страницу без изображений. Это связано с тем, что ссылка на изображение в сохраненном файле и ссылка на изображение, написанная JavaScript, являются «относительными» ссылками … браузер не может определить домен или путь для поиска изображений. Вы можете видеть, что здесь выглядит:
    Посмотреть источник
    HTML-только

    Если вы отредактируете этот сохраненный файл и добавьте строку:

     <Base href = "http://viewthis.info/superuser577187/page/">
    

    Файл будет выглядеть так:

     <HTML>
     <Голова>
     <Title> Водопад и маяк </ title>
     <Base href = "http://viewthis.info/superuser577187/page/">
     </ HEAD>
     <Тело>
     <Img src = "../ images / imagesCAIPHDL5.jpg" /> <br />
     <br /> <hr align = "left" width = "284" /> <br />
     <Script type = "text / javascript"> document.write ("\ n" + '<img src = "../ images / imagesCAG7M85E.jpg" /> <br />'); </ script>
     </ Body>
     </ Html>
    

    Теперь, если вы просмотрите отредактированный файл в браузере, вы получите страницу с обоими изображениями, отображаемыми правильно. Это связано с тем, что строка «base href» сообщает браузеру, где искать (домен и путь) для «отсутствующих» изображений. Вы можете видеть, что здесь выглядит:
    Источник-с базовым HREF

    При просмотре страницы в Интернете вы также можете сохранить исходный код страницы, нажав:
    File-->Save as...-->Webpage, complete .

    Если вы просмотрите источник этого сохраненного файла, вы увидите этот код HTML:

     <! - сохранен с url = (0042) http://viewthis.info/superuser577187/page/ ->
     <HTML>
     <Голова>
     <Title> Водопад и маяк </ title>
     <Meta content = "text / html; charset = windows-1252" http-equiv = Content-Type>
     <Meta name = GENERATOR content = "MSHTML 9.00.8112.16470">
     </ HEAD>
     <Тело>
     <Img src = "Waterfall-and-Lighthouse_files / imagesCAIPHDL5.jpg" /> <br />
     <br /> <hr align = left width = 284 /> <br />
     <Script type = text / javascript> document.write ("\ n" + '<img src = "../ images / imagesCAG7M85E.jpg" /> <br />'); </ script>
     </ Body>
     </ Html>
    

    Если вы просмотрите этот сохраненный файл в браузере, вы получите страницу с первым (верхним) изображением, отображаемым правильно, но второе изображение не отображается (отсутствует). Это связано с тем, что при сохранении с помощью Webpage, complete в браузере сохраняется копия первого изображения на вашем жестком диске и изменена ссылка в сохраненном файле, чтобы указать на локальную копию изображения. Ссылка на изображение для второго изображения отсутствует в сохраненном файле. Код JavaScript, который создает вторую ссылку на изображение, сохраняется в файле, но фактическая ссылка не является частью источника страницы, поэтому вторая ссылка на изображение не сохраняется, а второй файл изображения также не сохраняется.

    Опять же, если вы отредактируете этот сохраненный файл и добавьте строку:

     <Base href = "http://viewthis.info/superuser577187/page/">
    

    А затем просмотреть отредактированный файл в браузере, вы получите страницу с обоими изображениями, отображаемыми правильно.

    Другой способ сохранить страницу при просмотре страницы онлайн – это нажать:
    File-->Save as...-->Web Archive, single file-->Save .

    Если вы просмотрите этот сохраненный файл в браузере, вы получите страницу с обоими изображениями, отображаемыми правильно. Это связано с тем, что формат «Архив» сохраняет первое изображение внутри архивного файла (закодировано) и сохраняет веб-адрес, в котором находится веб-страница (и имя домена / путь), и второй файл изображения.

    Во всех этих примерах, «результат» JavaScript (текущее состояние страницы после обработки JavaScript), которая является второй ссылкой на изображение, не содержится в сохраненном файле, сохраняется только JavaScript.

    Имейте в виду, что в этих примерах «результат» JavaScript очень «упрощен», почти «тривиальное» использование JavaScript. На «реальных» веб-страницах JavaScript может быть очень сложным и может генерировать много страниц (ограничено только объемом доступной памяти).

    Теперь, как сохранить страницу с «результатом» из JavaScript. Мы сделаем это с помощью Microsoft Developer Tools (ссылка на скачивание показана ранее в этом ответе).

    После установки инструментов разработчика и просмотра страницы в Интернете нажмите клавишу F12 или щелкните:
    Tools-->F12 Developer Tools

    Затем в открывшемся окне нажмите:
    View-->Source-->DOM (page) .

    Откроется новое окно. Нажмите « File-->Save , а затем сохраните файл.

    Если вы просмотрите источник этого сохраненного файла, вы увидите этот код HTML:

     <HTML>
     <Голова>
     <Title> Водопад и маяк </ title>
     </ HEAD>
     <Тело>
     <Img src = "../ images / imagesCAIPHDL5.jpg" /> <br />
     <br /> <hr width = "284" align = "left" /> <br />
     <Script type = "text / javascript">
      Document.write ("\ n" + '<img src = "../ images / imagesCAG7M85E.jpg" /> <br />');
     </ Скрипт>
     <Img src = "../ images / imagesCAG7M85E.jpg" /> <br />
     </ Body>
     </ Html>
    

    Обратите внимание, что в источнике этого сохраненного файла вы увидите, что JavaScript сохранен и сохраняется «результат» JavaScript:

     ...
     <Script type = "text / javascript">
      Document.write ("\ n" + '<img src = "../ images / imagesCAG7M85E.jpg" /> <br />');
     </ Скрипт>
     <Img src = "../ images / imagesCAG7M85E.jpg" /> <br />
     ...
    

    Я думаю, это то, что вы хотели. Но есть две проблемы.

    Во-первых, как и прежде, если вы просмотрите этот сохраненный файл в браузере, вы получите пустую страницу без изображений. Это связано с тем, что ссылки изображения в сохраненном файле являются «относительными» ссылками … браузер не может указать домен или путь для поиска изображений. Вы можете видеть, что здесь выглядит:
    DevTools-DOM

    Опять же, если вы отредактируете этот сохраненный файл и добавьте строку:

     <Base href = "http://viewthis.info/superuser577187/page/">
    

    А затем просмотрите отредактированный файл в браузере, вы получите страницу с обоими изображениями. Вы можете видеть, что здесь выглядит:
    -DevTools DOM-с-базовой HREF

    Здесь вы заметите вторую проблему. Первое изображение (водопад) показано правильно (один раз), но второе изображение (Маяк) показано дважды. Это происходит потому, что, когда загружена сохраненная страница, JavaScript снова выполняет создание ссылки для изображения для второго изображения, а также ссылка на изображение для второго изображения также сохраняется в файле.

    Чтобы исправить это, вам нужно снова отредактировать сохраненный файл и удалить JavaScript (удалить теги <script...> and </script> и все, что находится между ними). Теперь источник отредактированного файла выглядит так:

     <HTML>
     <Голова>
     <Title> Водопад и маяк </ title>
     <Base href = "http://viewthis.info/superuser577187/page/">
     </ HEAD>
     <Тело>
     <Img src = "../ images / imagesCAIPHDL5.jpg" /> <br />
     <br /> <hr width = "284" align = "left" /> <br />
     <Img src = "../ images / imagesCAG7M85E.jpg" /> <br />
     </ Body>
     </ Html>
    

    Теперь сохраненный файл содержит «результат» JavaScript по вашему желанию, и если вы просмотрите отредактированный файл в браузере, вы получите страницу с только одним из каждого из двух изображений, отображаемых правильно. Вы можете видеть, что здесь выглядит:
    DevTools-DOM-Final

    Теперь это может показаться очень сложным, но на самом деле это не так …

    После загрузки и установки инструментов разработчика это всего лишь 4 простых шага … При просмотре (в браузере) страницы, которую вы хотите сохранить:

    1. Нажмите клавишу F12 или выберите: Tools-->F12 Developer Tools
    2. В открывшемся окне нажмите: View-->Source-->DOM (page) .
    3. В новом окне выберите File-->Save , а затем сохраните файл.
    4. Отредактируйте сохраненный файл и добавьте строку «base href» и удалите <script...> ... </script>

    При использовании Firefox вы можете CTRL+A выбрать все, щелкнуть правой кнопкой мыши по экрану и использовать View source code of selection . Вы увидите полный HTML-код, который будет отображаться, содержащий введенные элементы времени выполнения и все. В окне исходного кода вы можете сохранить этот HTML-файл в файл.

    Существует также Firebug , мощный инструмент для отладки веб-сайтов, который позволяет вам проверять сгенерированный HTML-код для достижения аналогичного результата.

    Найдено, что Firefox Add-on Mozilla Archive Format ( http://maf.mozdev.org/ ) имеет опцию Faithful Save, которая создает «эффективный CSS» и разделяет <script> (он может экспортироваться в MHTML, MAFF, Complete Веб-страница и конвертировать в них). Он проделал работу для простой страницы с несколькими сценариями, которые мне нужны для моментального снимка в формате HTML.

    Interesting Posts

    Как может `какой cmd`! = Cmd?

    Невозможно использовать Интернет из-за подозрения на вредоносное ПО DNS

    Папка Windows.old, загруженная с помощью Vista – нужна ли она?

    Копирование PNG с прозрачностью из браузера показывает черный фон вместо

    Windows 7 RTM 32Bit против 64Bit (с 4 ГБ оперативной памяти)

    Как установить Windows 8 без установочного DVD, который поставляется вместе с моим ноутбуком?

    Если мы не будем использовать обои на рабочем столе, это увеличит производительность окон?

    Что такое 6-контактный разъем питания на HP ProDesk?

    Настройка ярлыка для запуска планировщика задач

    Можно ли выполнить zip-файл?

    Неопределенное поведение и точки последовательности

    Как интерпретировать статистику прогона memtest?

    Невозможно использовать NVIDIA GeForce, только встроенная графика Intel

    Сколько времени, пока неиспользуемый жесткий диск не потеряет свои данные?

    Dell Vostro 230 (мини) – изменение жестких дисков

    Давайте будем гением компьютера.