2012-01-09 14 views
5

Todavía soy un poco nuevo en la codificación de dojo, javascript y HTML. Heredé la propiedad de una página HTML que está codificada usando dojo 1.4.2 (se actualizará en el futuro) y javascript. Esencialmente, la página HTML contiene un formulario que se muestra inicialmente al usuario. Una vez que el usuario completa el formulario y lo envía, el formulario se reemplaza por contenido generado en función de sus respuestas.¿Cómo se puede ahorrar una página HTML dinámica o generada?

Esto se hace mediante el uso de las respuestas en el formulario para revelar u ocultar varios elementos div que ya están contenidos en el archivo HTML. Entonces la forma está oculta y se revela un subconjunto de otros elementos div.

Nos gustaría que esta página generada pueda ser guardada por el usuario como una página HTML estática. Entonces, esencialmente, queremos guardar solo los divs mostrados en el archivo en lugar de guardarlos en toda la página. Actualmente, un guardado solo guarda una copia local que requeriría que el usuario vuelva a enviar el formulario en cada vista.

Me dijeron que esto se podía hacer pasando datos a un servicio (posiblemente un JSP) que manejaría esto y volvería al navegador. Sin embargo, no estoy familiarizado con esto y no he podido encontrar ningún ejemplo. ¿Hay alguna manera de hacer esto? ¿Alguien tiene algún ejemplo o documentación que pueda señalarme?

Idealmente, me gustaría insertar un botón de guardar que guarda el contenido generado que se ve en el navegador sin crear realmente un HTML estático que permanecerá en el servidor.

Gracias de antemano.

+0

¿El contenido está solo en elementos de formulario (entradas) o también está actualizando DIV/SPAN (otros elementos HTML)? – vol7ron

+0

Al principio, hay elementos de formulario en la parte superior del HTML, pero una vez que hace clic en el botón Enviar. El contenido "generado" que se muestra no es más que DIVs/SPAN, etc. en la parte inferior de la página HTML, que se revelan actualizando el estilo. – piperp

Respuesta

1

Puede introducir un mecanismo que realice cambios en la página de acuerdo con los parámetros de URL (es decir, el contenido de una cadena de consulta analizada).

I.e. dado un URL que contiene una porción de consulta (por ejemplo http://your.site.com/path/to/page?p1=true & p2 = true) los Element s asignan a p1 o p2 mostraría; otros no lo harían

+0

Dada mi experiencia y marco de tiempo, es menos probable que vaya por este camino, pero gracias por la contribución. – piperp

+0

Terminamos yendo por este camino debido a las restricciones en el uso de herramientas adicionales. También convertimos la página HTML a un JSP para facilitar las cosas. La combinación nos permitió guardar una copia estática. – piperp

+0

¡Es bueno escuchar! Bien hecho. – FK82

1

Puede usar el complemento flash para descargar datos creados dinámicamente. Escribí una pequeña secuencia de comandos here que hace el truco.

Aquí está an example del guión.

Simplemente deje caer las tres cosas en dist dondequiera que estén sus otros archivos javascript. Incluya los scripts swfobject.js y bhd.js en el encabezado. Incluir algo de HTML como este en el cuerpo: <div id="dl_button"></div>

al cargar la página, ejecutar un script como el siguiente:

var dlBtn = new BHD.Button({ 
    // id of the element to replace with this button (required) 
    id:'dl_button', 
    // button image 
    sprite:'buttons.png' 
},function(){ 
    // set default filename 
    dlBtn.setFile('untitled.html'); 
    // set file contents 
    dlBtn.setData('<html>' + document.documentElement.innerHTML + '</html>'); 
}); 

Su "buttons.png" tiene que ser algo como esto (un sprite con 3 estados layed verticalmente):

button sprite

Si todo se hizo bien, haga clic en el botón debe pedir al usuario para descargar una copia del estado actual de la página.

+0

Gracias. Echaré un vistazo e intentaré esto esta semana antes de marcar una solución que funcione para mí. – piperp

1

usando algo como jQuery, es muy sencillo de obtener todo el contenido HTML representado:

$(document).ready(function(){ 
    var rendered = $('html').html(); // store this in some variable 
}); 

existe el problema de que desea guardar la página, que no se puede hacer tan fácilmente en JavaScript, debido a la seguridad del navegador restricciones, que impiden que el navegador acceda al sistema de archivos local.

Internet Explorer puede ser una excepción si se usa ActiveX o execCommand (http://4umi.com/web/javascript/filewrite.php). De lo contrario, tendrá que usar alguna herramienta/complemento de terceros (como Flash) como lo ha señalado GGG.

+0

Gracias. Entonces, si lo entiendo correctamente, puedo obtener el contenido renderizado, pero el problema seguirá permitiendo que el usuario guarde localmente, dependiendo del navegador, que probablemente solo se pueda abordar utilizando alguna herramienta/complemento adicional. – piperp

+0

Exactamente. Para ser un navegador cruzado, debes usar el complemento adicional (como Flash) por razones de seguridad. Imagínese si navega por un sitio desde una lista de Google y tiene la capacidad de escribir [/ read] en [/ desde] su disco duro. Podría tomar su información confidencial o transmitir virus fácilmente, sin que usted haga otra cosa que ver una página web. Eso sería lo más inseguro de todos. – vol7ron

3

¿Qué tal un bookmarklet como este?

javascript:document.location='data:text/html,'+document.all[0].innerHTML; 

Funciona mediante el acceso a la representación HTML de la corriente DOM, y luego vuelve a dirigir a una página nuevaque se construye desde el formato HTML mediante el Data URI scheme.

La nueva página se puede guardar fácilmente utilizando el elemento de menú guardar de su navegador. Tenga en cuenta que las URL relativas no sobrevivirán a esta transformación, por lo que la página guardada puede perder sus referencias de hoja de estilo/script/imagen.

Cuestiones relacionadas