Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript Grundkurs

Daten in einem IFrame speichern

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sie können eine Datei in einem IFrame als Datenspeicher verwenden. Im Film sehen Sie, wie Sie das mit Hilfe von Methoden von node (appendChild()) und document (createElement() und createTextNode()) machen können.
04:01

Transkript

Mittels iFrames, oder Frames allgemein, aber am besten eignet sich IFrames können Sie auch Daten in einer Webseite speichern, beispielsweise Benutzereingaben und zwar temporär, das heißt solange wie die Seite im Browser erhalten bleibt. Man kann diese Eingaben auch in variablen ablegen, allerdings das Speichern in einer Datei hat einen gewissen Charme zumal man diese Datei später ja auch zum Server schicken kann und man kann Daten wieder herausholen und gewisse Dinge wieder reproduzieren, was ein Anwender gemacht hat. Tatsächlich sehen Sie hier in grunde jetzt die Technik, die google nutzt um bei Ajaxanfragen die History zu gewährleisten. Sprich wenn der Anwender auf die Zurückschaltfläche klickt, dass er wirklich auf den Zustand kommt von dem her kam. Wenn Sie eine Ajaxanfrage haben bedeutet das normalerweise, dass die Historie nicht gepflegt wird. Das geht an dieser vorbei und google speichert die Daten in einem unsichtbaren IFrame. Wir machen das jetzt in dem Beispiel in einem sichtbaren, aber nur deswegen, damit Sie sehen, wie das von der Idee her geht. Schauen wir uns zuerst die Applikation an. Iich habe hier ein IFrame, der zu Demostrationzwecken sichtbar ist. Normalerweise würden Sie ihn unsichtbar machen mit DisplayNone oder so und ich verfolge auf welche dieser Button der Anwender klickt, wenn ich hier drauf klicke wird ja einen Text angezeigt, ich klicke wieder hier drauf , wird hier ein anderer Text angezeigt und wieder hier drauf ein ditter und so weiter. Und wenn Sie diesen Bereich beachten, dann sehen Sie, dass sämtliche Texte, die wieder aufgetaucht sind, hier untereinander aufgelistet werden. Richten Maustaste drauf, Element untersuchen, dann sehen Sie, dass hier Überschriften der Ordnung H6 auftauchen, in einer Seite die ich erstmal leer hatte. Schauen Sie sich diese Seite mal an. Das ist der reine HTML Code von der Seite und so sieht sie nun aus, also offensichtlich habe ich dynamisch gewisse Strukturen in diese Seite eingefügt. Ich habe mich jetzt für Überschrift der Ordnung h6 entschieden, um einfach eine feste Struktur zu haben. Sie können dort auch XML-Daten rein schreiben oder aufzählungslisten, oder was auch immer Sie sich vorstellen können, was eine saubere Struktur hat, wo mann diese einzelnen Schritte zum Beispiel speichern kann. Normalerweise will man hinterher hier wieder darauf zugreifen. Und das ist das Codeing. Ich wähle hier einen Text aus, den ich speichern möchte. Das mache ich mit einer Switch Case und das steht hier nicht im Fokus, aber was ich hier mache, ist dass ich mit Methoden von Document und Node arbeite. Mit Document erzeuge ich ein Element. DocumentCreateElement H6, das ist ein Element von Typ H6. Dann erzeuge ich mit creaTetextNode einen Textknoten und dieser Wert der Variabletext wurde hier über diese Switch Case ausgewählt und füge mit der Nodemethode appendChild diesen Text, dem Element hierhin zu. Und das worum es hier geht, ist im Wesentlichen der Zugriff auf dieses Frame. Das mache ich wieder mit window.frames 0 oder den entsprechenden Index von meinem gewünschten Frame und dann kann ich, weil das ein Minderobjekt ist über Document weiterarbeiten und ich spreche hier den Body an. Ich kann auch jede andere Struktur in dieser Seite ansprechen und füge die Struktur, die ich hier zuasammengebaut habe, also diese Überschrift der Ordnung H6, mit dem ausgewählten Text , über appendChild der Datei in dem Frame hinzu. Und das ist da gespeichert damit, nicht trivial die Technik, gebe ich zu, aber ich denke mit relativ wenig Schritten umzusetzen und eine durchaus interessante Lösung.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!