innerHTML manipolazione in JavaScript

Question

Sto sviluppando una pagina web il codice, che recupera in modo dinamico il contenuto dal server e poi posti il contenuto del contenitore nodi utilizzando qualcosa di simile

container.innerHTML = content;

A volte devo sovrascrivere alcuni contenuti precedenti di questo nodo.Questo funziona bene, fino a quando non succede che il precedente contenuto occupato più spazio verticale quindi una nuova occuperebbero E un utente scorre la pagina verso il basso -- scorrere più di nuovi contenuti permetterebbe a purché la sua altezza.

In questo caso la pagina viene ridisegnata in modo non corretto -- alcuni manufatti dell'antico contenuti rimangono.Funziona bene, ed è anche possibile sbarazzarsi di artefatti, riducendo al minimo e il ripristino del browser (o forzare la finestra per essere ridisegnata in un altro modo), tuttavia questo non mi sembra molto conveniente.

Sto testando questo solo in Safari (questo è un iPhone-sito ottimizzato).

Qualcuno ha un'idea di come trattare con questo?

Answer 1

La soluzione più semplice che ho trovato sarebbe quello di inserire un tag di ancoraggio <a> in alto div modifica:

<a name="ajax-div"></a>

Poi, quando si modifica il contenuto del div, si può fare questo per avere il browser saltare il tag di ancoraggio:

location.hash = 'ajax-div';

Utilizzare questo per assicurarsi che l'utente non scorre troppo in basso quando si aggiorna il contenuto e non dovresti avere il problema in primo luogo.

(testato nelle ultime FF beta e ultimo safari)

Answer 2

Sembra che il motore di rendering webkit di Safari non è in primo luogo riconoscere il contenuto di cambiare, almeno non completamente sufficiente per rimuovere il precedente contenuto html.Riducendo al minimo e quindi il ripristino di windows, si avvia un ridisegno evento nel browser, il motore di rendering.

Penso che vorrei esplorare le 2 vie:prima potevo usare un iframe invece dell'attuale "contenuto" nodo?Browser aspettare Iframe per cambiare, però come vedete non sempre sono così bravi a cambiare il contenuto di un DIV o di altri elementi.

In secondo luogo, forse modificando la posizione di scorrimento, come suggerito in precedenza.Si potrebbe semplicemente spostare per scorrere fino a 0 come suggerito o se è invadente si potrebbe provare a ripristinare lo scorrimento dopo la modifica del contenuto.Sottrarre l'altezza del vecchio nodo di contenuto dall'attuale posizione di scorrimento (ripristino del browser scorrere il contenuto del nodo 0), modificare il contenuto del nodo, quindi aggiungere il nuovo nodo di altezza per la posizione di scorrimento.

Palehorse è giusto però (io non voto la sua risposta fino al momento - nessun punti) un'astrazione biblioteca come jQuery, Dojo, o anche il Prototipo può spesso aiutare con queste cose.Soprattutto se il tuo sito / pagina in movimento al di là della semplice manipolazione del DOM troverete gli strumenti e miglioramenti forniti da biblioteche di essere un grande aiuto.

Answer 3

Sembra che si stanno avendo un problema con il browser stesso.Questo problema si verifica solo in un browser?

Una cosa che potresti provare è utilizzando un leggero biblioteca come jQuery.Gestisce le differenze tra i browser abbastanza bene.Per impostare il codice HTML interno di un div con l'ID di contenitore si potrebbe semplicemente scrivere questo:

$('#container').html( content );

Che funzionano nella maggior parte dei browser.Non so se risolverà il tuo problema in particolare o no, ma potrebbe essere la pena di provare.

Answer 4

Sarebbe lavoro per impostare la posizione di scorrimento indietro verso l'alto (elemento.scrollTop = 0;elemento.scrollLeft = 0;dal cuore) prima di sostituire il contenuto?

Answer 5

Impostare l'elemento CSS altezza automatico ogni volta che si aggiorna innerHTML.

Answer 6

Vorrei provare a fare un contenitore.innerHTML = ";contenitore.innerHTML = contenuto;