Come catturare il runtime html contenuti/stato con tutti gli stili applicati e javascript rimossi

Question

Shorter versione di domanda

non v'è alcun modo per catturare html runtime (stato attuale della dom) con tutti gli stili applicati/inline di una pagina web dinamica (ajax/javascript)?

---

versione più lunga

Quello che vorrei fare è salvare lo stato attuale delle dom come singola pagina HTML con tutti gli stili sia avvolto in <style> tag applicati o stili inline.

analogicamente, Che cosa ho bisogno è qualche cosa che assomiglia a un file core (che dà stato attuale della domanda), ma in questo caso un file (html) che potrebbe essere caricato nella borwser per visualizzare/debug.

Questa operazione sarebbe abbastanza semplice se non c'è javascript nella pagina.

• fare File->Save Page As -> html complete da un browser Web
• O utilizzare strumenti come http://www.httrack.com o curl per scaricare la pagina e tutte le immagini collegate

di seguito sono elencati in alta livello di quello che potrebbe essere fatto a fare lo stesso programatically (anche se non soluzione completa)

• ottenere il contenuto HTML
• rimuovere un ll tag e attributi su XXX da ogni piace onclick
• ottenere * contenuti css
stili
• embed css in entro <style>
• cambiamento tutti i percorsi delle immagini a relativa
• salvare tutte le immagini

Ma quando javascript è usato per costruire la pagina o se lo stato della pagina è alterato su caricamento/clic come se alcuni elementi fossero nascosti e il layout della pagina fosse alterato, i metodi sopra non potevano essere usati.

Quindi, come salvare lo stato corrente di una pagina Web (javascript abilitato)?

Se un tale metodo/strumento/plugin esiste allora sarebbe utile per e-mail/condividere la pagina con una persona che non ha l'accesso all'applicazione internet o web

Answer 1

Quindi io parto dal presupposto che si vuole fare sul desktop? Quindi vorrei usare un browser preferibilmente senza testa, come phantomjs, e disabilitare lo scripting cross-site. Scrivi javascript che carica l'URL di destinazione in iframe, recupera la sua dom e la salva in un file. Sarà comunque necessario salvare tutti i CSS manualmente, non sapendo come inserirlo.

Answer 2

In merito a come è possibile ottenere lo stato corrente del DOM.

È possibile utilizzare jQuery .html() per ottenere il DOM corrente.

var DOMState = $('html').html(); 

Si potrebbe scrivere un bookmarklet che avrebbe iniettare jquery (vedi http://blog.reybango.com/2010/09/02/how-to-easily-inject-jquery-into-any-web-page/ per un esempio) e quindi acquisire il codice HTML.