Есть (как минимум) две причины, по которым ваш сохраненный файл будет выглядеть не так, как живой веб-сайт, который вы сохранили:
- Некоторые или многие ссылки на изображения на странице могут быть "относительными" ссылками. Аналогично, ссылки на файлы «.css» и «.js» на странице могут быть "относительными" ссылками.
- Некоторые ссылки на изображения и другие файлы могут содержаться в этих файлах ".css" и ".js".
Например, допустим, вы смотрите на страницу:
http://example.com/something/index.php
На этой странице есть "относительная" ссылка на файл изображения:
"../images/picture.jpg"
Также на этой странице есть "относительная" ссылка на файл .css:
"../css/style.css"
Таким образом, когда вы сохраняете файл «.html» для страницы, он содержит эти "относительные" ссылки. Когда вы открываете сохраненную страницу в браузере, она ищет эти файлы изображений и CSS в папке, где вы сохранили файл .html.
Если эти файлы изображений и CSS не находятся в папке, где вы сохранили файл .html, страница не будет отображаться должным образом.
Есть несколько вещей, которые вы можете сделать, чтобы "решить" это.
- Выберите
File-->Save as...-->Webpage, complete (или аналогичную формулировку) при сохранении веб-страницы на своем компьютере. Это сохранит копию изображения и файлов .css/.js на вашем компьютере и изменит ссылку в сохраненном html-файле, чтобы указать изображение /файл на вашем компьютере. Это не "надежная защита". Кажется, что этот процесс будет часто "пропустить" некоторые файлы. В этом случае вам придется вручную найти и загрузить отсутствующие файлы и вручную отредактировать ссылки в сохраненном html-файле, чтобы "указать" на файлы, сохраненные на вашем компьютере.
- Сохраните HTML-файл как файл «Веб-архив» («.mht»)
Добавьте строку «base href ...» в раздел <head> в сохраненной копии html-файла. Используя приведенный выше URL в качестве примера:
http://example.com/something/index.php
Удалите «index.php» из веб-страницы URL дает вам:
http://example.com/something/
Добавьте это в раздел <head> в сохраненной копии веб-страницы, например:
<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):
Кажется, может быть некоторая путаница при сохранении веб-страниц, содержащих относительные ссылки, из браузера, поэтому я решил привести рабочий пример.
Вот веб-страница, которую я создал, чтобы продемонстрировать это:
Картинки Водопад-Маяк
Вот HTML-код этой страницы:
<html>
<head>
<title>Waterfall and Lighthouse</title>
</head>
<body>
<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>
<head>
<title>Waterfall and Lighthouse</title>
</head>
<body>
<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>
<head>
<title>Waterfall and Lighthouse</title>
<base href="http://viewthis.info/superuser577187/page/">
</head>
<body>
<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-код:
<!-- saved from url=(0042)http://viewthis.info/superuser577187/page/ -->
<html>
<head>
<title>Waterfall and Lighthouse</title>
<meta content="text/html; charset=windows-1252" http-equiv=Content-Type>
<meta name=GENERATOR content="MSHTML 9.00.8112.16470">
</head>
<body>
<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>
<head>
<title>Waterfall and Lighthouse</title>
</head>
<body>
<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 />');
</script>
<img src="../images/imagesCAG7M85E.jpg" /><br />
</body>
</html>
Обратите внимание, что в источнике этого сохраненного файла вы увидите, что JavaScript сохранен и "результат" JavaScript также сохранен:
...
<script type="text/javascript">
document.write("\n"+'<img src="../images/imagesCAG7M85E.jpg" /><br />');
</script>
<img src="../images/imagesCAG7M85E.jpg" /><br />
...
Я думаю, что это то, что вы хотели. Но есть две проблемы.
Во-первых, как и раньше, если вы просматриваете этот сохраненный файл в браузере, вы получите пустую страницу без картинок. Это связано с тем, что ссылки на изображения в сохраненном файле являются "относительными" ссылками ... браузер не может указать домену или пути, где найти изображения. Вы можете увидеть, как это выглядит здесь:
DevTools-DOM
Опять же, если вы отредактируете этот сохраненный файл и добавите строку:
<base href="http://viewthis.info/superuser577187/page/">
а затем просмотрите отредактированный файл в браузере, вы увидите страницу с обоими изображениями. Вы можете увидеть, как это выглядит здесь:
DevTools-DOM-с базовым HREF
Здесь вы заметите вторую проблему. Первое изображение (водопад) показано правильно (один раз), а второе изображение (Маяк) показано дважды. Это происходит потому, что когда загруженная сохраненная страница загружается, JavaScript снова запускается, генерируя ссылку на изображение для второго изображения, и ссылка на изображение для второго изображения также сохраняется в файле.
Чтобы это исправить, вам нужно снова отредактировать сохраненный файл и удалить JavaScript (удалите теги <script...> and </script> и все, что между ними). Теперь источник отредактированного файла выглядит так:
<html>
<head>
<title>Waterfall and Lighthouse</title>
<base href="http://viewthis.info/superuser577187/page/">
</head>
<body>
<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 довольно простых шага ... При просмотре (в браузере) страницы, которую вы хотите сохранить:
- Нажмите клавишу
F12 или нажмите: Tools-->F12 Developer Tools
- В открывшемся окне нажмите:
View-->Source-->DOM (page) .
- В новом окне выберите
File-->Save , а затем сохраните файл.
- Отредактируйте сохраненный файл, добавьте строку "base href" и удалите
<script...> ... </script>
