Come rendere salvabile una pagina HTML dinamica o generata?

Sono ancora un po 'nuovo per la codifica di dojo, javascript e HTML. Ho ereditato la proprietà di una pagina HTML che è codificata usando dojo 1.4.2 (aggiorneremo in futuro) e javascript. Essenzialmente la pagina HTML contiene un modulo che viene inizialmente visualizzato all'utente. Dopo che l'utente compila il modulo e lo invia, il modulo viene sostituito con il contenuto generato in base alle risposte.Come rendere salvabile una pagina HTML dinamica o generata?

Questo viene fatto utilizzando le risposte nel modulo per rivelare o nascondere vari elementi div che sono già contenuti nel file HTML. Quindi la forma è nascosta e alcuni sottoinsiemi di altri elementi div sono rivelati.

Vorremmo che questa pagina generata fosse salvabile dall'utente come pagina HTML statica. Quindi, in sostanza, vogliamo salvare solo i div visualizzati nel file anziché nell'intera pagina. Attualmente, un salvataggio salva solo una copia locale che richiederebbe a un utente di inviare nuovamente il modulo su ogni vista.

Mi è stato detto che questo poteva essere fatto passando i dati ad un servizio (possibilmente un JSP) che gestiva questo e passava al browser. Tuttavia, non ho familiarità con questo e non sono stato in grado di trovare alcun esempio. C'è un modo per fare questo e qualcuno ha qualche esempio o documentazione che potrei essere indicato?

Idealmente, mi piacerebbe inserire un pulsante di salvataggio che salva il contenuto generato visualizzato nel browser senza creare effettivamente un codice HTML statico che rimarrà sul server.

Grazie in anticipo.

fonte

2012-01-09 piperp

Il contenuto è solo in elementi di modulo (input) o si stanno aggiornando DIV/SPAN (altri elementi HTML)? – vol7ron

Inizialmente nella parte superiore dell'HTML sono presenti degli elementi di forma, ma dopo aver fatto clic sul pulsante di invio. Il contenuto "generato" visualizzato non è altro che DIV/SPAN, ecc. Nella parte inferiore della pagina HTML che vengono rivelati aggiornando lo stile. – piperp

È possibile introdurre un meccanismo che apporta modifiche alla pagina in base ai parametri URL (ad esempio il contenuto di una stringa di query analizzata).

I.e. dato un URL contenente una porzione query (ad esempio http://your.site.com/path/to/page?p1=true & p2 = true) i Element s mappati p1 o p2 mostrerebbe; altri no.

fonte

2012-01-09 18:39:28 FK82

Data la mia esperienza e il mio tempismo, sono meno propenso a seguire questa strada, ma grazie per l'input. – piperp

Abbiamo finito per seguire questo percorso a causa delle restrizioni nell'utilizzo di strumenti aggiuntivi. Abbiamo anche convertito la pagina HTML in un JSP per semplificare le cose. La combinazione ci ha permesso di salvare una copia statica. – piperp

Buono a sapersi! Molto bene. – FK82

È possibile utilizzare il plug-in Flash per scaricare dati creati dinamicamente. Ho scritto una piccola sceneggiatura here che fa il trucco.

Ecco lo script an example.

Basta trascinare le tre cose in dist ovunque siano gli altri file javascript. Includere gli script swfobject.js e bhd.js nella testa. Includere alcuni html come questo nel corpo: <div id="dl_button"></div>

al caricamento della pagina, eseguire uno script come questo:

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>'); 
});

Il tuo "buttons.png" ha bisogno di guardare qualcosa di simile (uno sprite con 3 stati layed in verticale):

button sprite

Se tutto è stato fatto a destra, fare clic sul pulsante dovrebbe indurre l'utente a scaricare una copia dello stato attuale della pagina.

fonte

2012-01-09 18:50:46

Grazie. Dare un'occhiata e provare questa settimana prima di prendere nota di una soluzione che funziona per me. – piperp

Utilizzando qualcosa come jQuery, è semplice per ottenere tutti i contenuti HTML reso:

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

Il problema esiste che si desidera salvare la pagina, che non può essere fatto facilmente in JavaScript, grazie alla sicurezza del browser restrizioni, che impediscono al browser di accedere al file system locale.

Internet Explorer può essere un'eccezione, se si utilizza ActiveX o execCommand (http://4umi.com/web/javascript/filewrite.php). Altrimenti, dovrai utilizzare alcuni strumenti/plugin di terze parti (come Flash) come GGG ha sottolineato.

fonte

2012-01-09 20:05:14 vol7ron

Grazie. Quindi, se ho capito bene, posso ottenere il contenuto renderizzato, ma il problema continuerà a consentire a un utente di salvare localmente, a seconda del browser, che può essere indirizzato solo usando qualche strumento/plugin aggiuntivo? – piperp

Esattamente. Per essere cross-browser, devi usare il plugin aggiuntivo (come Flash), per ragioni di sicurezza. Immagina se sfogli un sito da un annuncio di Google e abbia la possibilità di scrivere [/ leggere] su [/ da] il tuo disco rigido. Potrebbe prendere le tue informazioni confidenziali o trasmettere facilmente virus, senza che tu faccia nulla di diverso dalla visualizzazione di una pagina web. Questa sarebbe la cosa più insicura di sempre. – vol7ron

Che ne dici di un bookmarklet come questo?

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

Funziona accedendo alla rappresentazione HTML della corrente DOM, e poi reindirizza a una nuova pagina che è costruito da markup HTML usando il Data URI scheme.

La nuova pagina può essere facilmente salvata utilizzando la normale voce di menu del tuo browser. Tieni presente che gli URL relativi non sopravviveranno a questa trasformazione, pertanto la pagina salvata potrebbe perdere i riferimenti a fogli di stile/script/immagini.

fonte

2012-04-25 19:15:36 lukecyca

Come rendere salvabile una pagina HTML dinamica o generata?

risposta

Problemi correlati