Guardar el sitio web que contiene javascript después de que se interpretó

Hay un sitio web que quiero guardar que contiene javascript (si eso ayuda, el sitio es vyou.com, aquí hay un enlace a la página de usuario de Andrew WK ) que actualiza el contenido de lo que el usuario ve en el sitio web. Lo que me gustaría hacer es guardar el sitio una vez que la lista de enlaces a las respuestas de vídeo de un usuario se amplía completamente. No tengo la intención de guardar también los videos de los enlaces conducen a, sólo quiero guardar el estado de mi navegador está pulg Qué navegador que uso no me importa.

¿Alguien ha hecho algo similar o sabe cómo lograr esto?

Existen (al menos) dos razones por las que el archivo guardado no se verá exactamente igual al sitio web en directo que guardó:

  1. Algunos o muchos de los enlaces a las imágenes de la página podrían ser enlaces "relativos". De manera similar, los enlaces a archivos ".css" y ".js" en la página podrían ser enlaces "relativos".
  2. Algunos enlaces a imágenes y otros archivos pueden estar contenidos dentro de estos archivos ".css" y ".js".

Por ejemplo, digamos que miras una página:

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

En esa página, hay un enlace "relativo" a un archivo de imagen:

 "../images/picture.jpg" 

También en esa página es un vínculo "relativo" a un archivo .css:

 "../css/style.css" 

Por lo tanto, cuando guarda el archivo ".html" para la página, contiene estos vínculos "relativos". Cuando abre su página guardada en su navegador, busca estos archivos de imagen y css en la carpeta donde guardó el archivo .html. Si estos archivos de imagen y css no están en la carpeta donde guardó el archivo .html, la página no se mostrará correctamente.

Hay algunas cosas que puedes hacer para "resolver" esto.

  1. Elija File-->Save as...-->Webpage, complete (o un texto similar) cuando guarde la página web en su computadora. Esto guardará una copia de la imagen y los archivos .css / .js en su computadora y modificará el vínculo en el archivo html guardado para apuntar a la imagen / archivo en su computadora. Esto no es "infalible". Parece que este proceso a menudo "falta" algunos archivos. En este caso, tendrá que localizar y descargar manualmente los archivos que faltan y editar manualmente los vínculos del archivo html guardado para "apuntar" a los archivos guardados en su computadora.
  2. Guarde el archivo html como un archivo de "archivo web" (".mht")
  3. Agregue una línea "base href …" a la sección <head> en la copia guardada del archivo html. Utilizando la URL anterior como ejemplo:

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

    Quitar el "index.php" de la URL de la página web le da:

     http://example.com/something/ 

    Agregue esto a la sección <head> en la copia guardada de la página web, como esto:

     <Head>
     <Base href = "http://example.com/something/">
     <...>
     <...>
     </ Head>
      ...
    


Editar (2013-04-04):

Utilizando Internet Explorer, la mejor manera (quizás no perfecta) para guardar una página que también guarda el "resultado" del JavaScript en la página es utilizar las Herramientas de desarrollo de Microsoft y, a continuación, ver y guardar el origen de DOM para la página.

Yo digo "quizás no perfecto" …

Supongamos que tiene una página web que utiliza JavaScript para "generar" código HTML que añade una imagen a la página web.

Si ve la página web en línea, verá la imagen. Si ve el origen de la página ( View-->Source ) o guarda el origen de la página en un archivo ( File->Save as... ), verá el código JavaScript, pero no verá el código HTML <img...> Código.

Ahora, si utiliza las herramientas de desarrollo para ver y guardar el origen de DOM para la página y, a continuación, abrir el archivo guardado en un editor de texto, verá que el JavaScript original se incluye en el archivo guardado y debajo del JavaScript. Consulte el código <img...> que fue generado por el JavaScript.

Luego, si abre la página guardada en un navegador, verá la imagen dos veces. Esto se debe a que al abrir la página guardada, el JavaScript se ejecutará de nuevo y generará el código para mostrar la imagen, y debajo de ese es el código HTML para la imagen que se guardó en el archivo.

Puede "arreglar" esto editando el origen DOM guardado y, a continuación, eliminar (o comentar) el JavaScript. A continuación, cuando abra la página guardada en un navegador, verá la imagen sólo una vez.


Editar (2013-04-05):

Parece que puede haber cierta confusión sobre el ahorro de páginas web que contienen enlaces relativos, desde el navegador, así que decidí proporcionar un ejemplo de trabajo.

Esta es una página web que he creado para demostrar esto:
Cascada-Faro Fotografías

Aquí está el código HTML de esa página:

 <Html>
 <Head>
 <Title> Cascada y faro </ 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>

Si ve la página con el navegador (estoy utilizando IE9), verá la página web esperada correctamente, con 2 imágenes.

Mientras visualiza la página, puede guardar el origen de la página haciendo clic en: View-->Source , o haciendo clic en File-->Save as...-->Webpage, HTML only . A continuación, guarde el archivo. De cualquier manera, obtendrá el mismo código HTML:

 <Html>
 <Head>
 <Title> Cascada y faro </ 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>

Pero, si ve el archivo guardado en el navegador, obtendrá una página en blanco, sin imágenes. Esto se debe a que el enlace de imagen en el archivo guardado y el enlace de imagen escrito por JavaScript son vínculos "relativos" … el navegador no puede indicar el dominio o la ruta de donde buscar las imágenes. Puedes ver lo que se ve aquí:
Ver fuente
HTML solamente

Si edita este archivo guardado y agrega la línea:

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

El archivo se verá así:

 <Html>
 <Head>
 <Title> Cascada y faro </ 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>

Ahora, si ve el archivo editado en el navegador, obtendrá una página con ambas imágenes mostradas correctamente. Esto se debe a que la línea "base href" indica al navegador dónde buscar (dominio y ruta) para las imágenes "desaparecidas". Puedes ver lo que se ve aquí:
Fuente-con-base-href

Mientras ve la página en línea, también puede guardar el origen de la página haciendo clic en:
File-->Save as...-->Webpage, complete .

Si ve el origen de este archivo guardado, verá este código HTML:

 <! - saved from url = (0042) http://viewthis.info/superuser577187/page/ ->
 <Html>
 <Head>
 <Title> Cascada y faro </ title>
 <Meta content = "text / html; charset = windows-1252" http-equiv = Contenido-Tipo>
 <Meta name = GENERATOR content = "MSHTML 9.00.8112.16470">
 </ Head>
 <Body>
 <Img src = "Cascada-y-Faro_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>

Si ve este archivo guardado en el navegador, obtendrá una página con la primera imagen (arriba) mostrada correctamente, pero la segunda imagen no aparece (falta). Esto se debe a que al guardar con la Webpage, complete , el navegador guarda una copia de la primera imagen en su disco duro y modifica el vínculo en el archivo guardado para apuntar a la copia local de la imagen. El enlace de imagen de la segunda imagen no está presente en el archivo guardado. El código JavaScript que crea el segundo enlace de imagen se guarda en el archivo, pero el vínculo real no forma parte del origen de la página, por lo que el segundo enlace de imagen no se guarda y tampoco se guarda el segundo archivo de imagen.

Una vez más, si edita este archivo guardado y agrega la línea:

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

Y luego ver el archivo editado en el navegador, obtendrá una página con ambas imágenes mostradas correctamente.

Otra forma en que puede guardar la página, mientras ve la página en línea es haciendo clic en:
File-->Save as...-->Web Archive, single file-->Save .

Si ve este archivo guardado en el navegador, obtendrá una página con ambas imágenes mostradas correctamente. Esto se debe a que el formato "Archivo" guarda la primera imagen dentro del archivo comprimido (codificado) y guarda la dirección web donde se encuentra la página web (y el nombre / ruta de dominio) y el segundo archivo de imagen.

En todos estos casos de ejemplo, el "resultado" del JavaScript (el estado actual de la página después de procesar el JavaScript), que es el segundo enlace de imagen, no está contenido en el archivo guardado, solo se guarda el JavaScript.

Tenga en cuenta, que en estos ejemplos, el "resultado" del JavaScript es muy "simplista", un uso casi "trivial" de JavaScript. En las páginas web "reales", el código JavaScript puede ser muy complejo y puede generar muchas páginas (limitado sólo por la cantidad de memoria disponible).

Ahora, cómo guardar la página con el "resultado" del JavaScript. Lo haremos utilizando Microsoft Developer Tools (el enlace de descarga se muestra anteriormente en esta respuesta).

Después de instalar las herramientas de desarrollo, y mientras ve la página en línea, presione la tecla F12 o haga clic en:
Tools-->F12 Developer Tools

A continuación, en la ventana que se abre, haga clic en:
View-->Source-->DOM (page) .

Se abre una nueva ventana. Haga clic en File-->Save y guarde el archivo.

Si ve el origen de este archivo guardado, verá este código HTML:

 <Html>
 <Head>
 <Title> Cascada y faro </ 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>

Observe en el origen de este archivo guardado, verá que el JavaScript está guardado y el "resultado" del JavaScript también se guarda:

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

Creo que esto es lo que querías. Pero hay dos problemas.

Primero, como antes, si ve este archivo guardado en el navegador, obtendrá una página en blanco, sin imágenes. Esto se debe a que los vínculos de imagen en el archivo guardado son vínculos "relativos" … el navegador no puede indicar al dominio ni a la ruta de acceso dónde encontrar las imágenes. Puedes ver lo que se ve aquí:
DevTools-DOM

Una vez más, si edita este archivo guardado y agrega la línea:

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

Y luego ver el archivo editado en el navegador, obtendrá la página con las dos imágenes mostradas. Puedes ver lo que se ve aquí:
DevTools-DOM-con-base-href

Aquí te darás cuenta del segundo problema. La primera imagen (la cascada) se muestra correctamente (una vez), pero la segunda imagen (el faro) se muestra dos veces. Esto sucede porque cuando se carga la página guardada, el JavaScript se ejecuta de nuevo generando un enlace de imagen para la segunda imagen, y el enlace de imagen para la segunda imagen también se guarda en el archivo.

Para corregir esto, debes editar el archivo guardado de nuevo y quitar el JavaScript (quita las etiquetas <script...> and </script> y todo lo que las separa). Ahora, el origen del archivo editado tiene este aspecto:

 <Html>
 <Head>
 <Title> Cascada y faro </ 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>

Ahora, el archivo guardado contiene el "resultado" del JavaScript como querías, y si ves el archivo editado en el navegador, obtendrás una página con sólo una de cada una de las dos imágenes, mostrada correctamente. Puedes ver lo que se ve aquí:
DevTools-DOM-Final

Ahora, esto puede parecer muy complicado, pero en realidad no es …

Después de descargar e instalar las herramientas de desarrollo, es sólo 4 pasos bastante sencillos … Mientras visualiza (en el navegador) la página que desea guardar:

  1. Pulse la tecla F12 o haga clic en: Tools-->F12 Developer Tools
  2. En la ventana que se abre, haga clic en: View-->Source-->DOM (page) .
  3. En la nueva ventana, haga clic en File-->Save y guarde el archivo.
  4. Edite el archivo que guardó y agregue la línea "base href", y quite el <script...> ... </script>

Al usar Firefox, puede CTRL+A para seleccionar todo, haga clic derecho en la pantalla y use View source code of selection . Verá el HTML completo tal como se muestra, que contiene los elementos insertados en tiempo de ejecución y todos. Desde la ventana de código fuente puede guardar este código HTML en un archivo.

También hay Firebug , una poderosa herramienta para depurar sitios web que le permite inspeccionar código HTML generado para lograr un resultado similar.

Se encontró que Firefox Add-on Mozilla Archive Format ( http://maf.mozdev.org/ ) tiene la opción Fiel Guardar, que produce "CSS efectivo", y tiras <script> (puede exportar a MHTML, MAFF, Complete Página web, y convertir en estos). Ha hecho el trabajo para una página simple con pocos scripts que necesitaba para instantánea en formato HTML.