innerHTML- Manipulation in JavaScript

Question

Ich entwickle eine Web-Seite Code, der dynamisch den Inhalt vom Server abruft und dann legt diesen Inhalt Container-Knoten so etwas wie

mit

container.innerHTML = content;

Manchmal muss ich einige vorherigen Inhalt in diesem Knoten zu überschreiben. Dies funktioniert gut, bis es passiert, dass die bisherigen Inhalte mehr vertikalen Raum belegen dann ein neuer einnehmen würde, und ein Benutzer gescrollt die Seite nach unten -. Gescrollt über neue Inhalte erlauben würden, vorausgesetzt, seine Höhe

In diesem Fall zeichnet die Seite falsch - einige Artefakte des alten Inhalts bleiben. Es funktioniert gut, und es ist sogar möglich, Artefakte zu entfernen, durch die Minimierung und die Wiederherstellung des Browser (oder das Fenster zwingen, in einer anderen Art und Weise neu gezeichnet werden), aber dies ist nicht sehr bequem scheint.

Ich prüfe dies nur unter Safari (dies ist eine iPhone-optimierte Webseite).

Hat jemand auf die Idee, wie man damit umgehen?

Answer 1

Die einfachste Lösung, die ich gefunden habe, wäre ein Anker-Tag <a> an der Spitze des div platzieren Sie bearbeiten:

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

Wenn Sie dann den Inhalt des div ändern, können Sie dies tun, um die Browser-Sprung zu Ihrem Anker-Tag haben:

location.hash = 'ajax-div';

Verwenden Sie diese Option, um den Benutzer sicher nicht zu weit nach unten gescrollt, wenn Sie die Inhalte aktualisieren und Sie sollen das Problem in erster Linie nicht erhalten.

(getestet in der neuesten FF Beta und aktuelle Safari)

Answer 2

Es klingt wie die WebKit-Rendering-Engine von Safari ist zunächst nicht die Inhaltsänderung zu erkennen, zumindest nicht vollständig genug, um den vorherigen HTML-Inhalt zu entfernen. Das Minimieren und dann die Fenster Wiederherstellung initiiert eine Neuzeichnung Ereignis in dem Rendering-Engine des Browsers.

Ich glaube, ich 2 Wege gehen würde: Zuerst konnte ich einen Iframe anstelle des aktuellen ‚Inhalt‘ Knoten? Browser erwartet IFrames jedoch zu ändern, wie Sie sehen, sie sind nicht immer so gut an Inhalt von DIV oder anderen Elementen zu ändern.

Zweitens, vielleicht durch die Bildlaufposition zu modifizieren, wie früher vorgeschlagen. Man könnte einfach die Schriftrolle wieder auf 0 bewegen, wie vorgeschlagen oder wenn das aufdringlich könnten Sie versuchen, die Schriftrolle nach der Inhaltsänderung wiederherzustellen. die Höhe des alten Inhaltsknoten aus der aktuellen Scroll-Position subtrahiert (der Browsers blättern zu dem Inhalt Knotens 0 Reseting), den Knoteninhalt ändern, fügen Sie die Höhe des neuen Knotens in die Scroll-Position.

Palehorse stimmt aber (ich kann nicht stimmen seine Antwort im Moment nach oben - keine Punkte) eine Abstraktions-Bibliothek wie jQuery, Dojo oder sogar Prototyp oft mit diesen Dingen helfen kann. Vor allem, wenn Sie Ihre Seite / site Bewegen über einfache DOM-Manipulation sehen, werden Sie die Tools und Erweiterungen von Bibliotheken zur Verfügung gestellt finden eine große Hilfe sein.

Answer 3

Es klingt wie Sie ein Problem mit dem Browser selbst haben. Ist dieses Problem nur in einem Browser auf?

Eine Sache, die Sie könnten versuchen, eine leichte Bibliothek wie jQuery verwendet. Es behandelt Browser Unterschiede ziemlich gut. So stellen Sie den inneren HTML für ein div mit der ID Container Sie würden einfach schreiben dies:

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

Das wird in den meisten Browsern funktionieren. Ich weiß nicht, ob es Ihr Problem spezifisch oder nicht beheben, aber es kann einen Versuch wert sein.

Answer 4

Würde es funktionieren, die Bildlaufposition zurück an die Spitze zu setzen (element.scrollTop = 0; element.scrollLeft = 0; Auswendig)? Bevor der Inhalt ersetzt

Answer 5

Stellen Sie das CSS Höhe des Elements auf ‚auto‘ Sie jedes Mal innerHTML- aktualisieren.

Answer 6

Ich würde versuchen, container.innerHTML tun = ''; container.innerHTML = Gehalt;