Andre: Mittels Javascript Werte auf die nächste html übergeben

SELF-Forum

Mittels Javascript Werte auf die nächste html übergeben

Andre
– Informationen zu den Bewertungsregeln

Hallo, ich suche schon eine längere Zeit nach Möglichkeiten Werte mittels javascript an die nächste Seite zu übergeben. Das heißt, User gibt in das Suchformular seine Werte ein und klickt auf suchen. Daten werden mittels Ajax zum Server geschickt und die App erhält eine Antwort, Daraufhin soll sich die nächste HTML Seite öffnen. Und das Ergebnis in den dafür vordefinierten Bereich schreiben.

PHP und GLOBALS können nicht verwendet werden, ist eine App die mittels Cordova erstellt worden ist.

document.write ist keine Option da sonst alle Informationen auf der folge Seite überschrieben werden. Nächste HTML wird mittels window.open geöffnet. wie schaffe ich nun genau in diese daten zu schreiben?

vielen Dank für eure Hilfe,

Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. Mittels Javascript Werte auf die nächste html übergeben

    Der kleine Diktator
    – Informationen zu den Bewertungsregeln

    Na wnn du window.open nimmst, also eine Funktion aufrufst, kannst du doch Werte übergeben oder eine ajax-Response da rein schreiben. Darüber hinaus wäre noch localStorage-

    Alfredo

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Mittels Javascript Werte auf die nächste html übergeben

    Auge
    – Informationen zu den Bewertungsregeln

    Hallo

    Hallo, ich suche schon eine längere Zeit nach Möglichkeiten Werte mittels javascript an die nächste Seite zu übergeben. Das heißt, User gibt in das Suchformular seine Werte ein und klickt auf suchen. Daten werden mittels Ajax zum Server geschickt und die App erhält eine Antwort, Daraufhin soll sich die nächste HTML Seite öffnen. Und das Ergebnis in den dafür vordefinierten Bereich schreiben.

    document.write ist keine Option da sonst alle Informationen auf der folge Seite überschrieben werden. Nächste HTML wird mittels window.open geöffnet. wie schaffe ich nun genau in diese daten zu schreiben?

    Wenn du ein neues fenster/neuen Tab (z.B.) mit MeinFenster = window.open(); öffnest, hast du mit MeinFenster ein Objekt für dieses Fenster. Da du (vermutlich) die Kontrolle über den Quelltext des in diesem Fenster geöffnete Dokument hast, kannst du dort mit den DOM-Methoden von dir bestimmte Elemente ansprechen und sie selbst und/oder deren Inhalt manipulieren.

    Tschö, Auge

    --
    Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
    Terry Pratchett, „Gevatter Tod“
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Mittels Javascript Werte auf die nächste html übergeben

      Andre
      – Informationen zu den Bewertungsregeln

      danke für die schnelle Antwort dies habe ich bereits probiert ohne erfolg hier einkleiner Auszug:

      <html>
 <head>
  <script>
   function next(){
	var x = window.open("seite2.html");
	var i=x.document.getElementById("ergebnis");
	alert(i); //null
	var a=x.document.getElementById("test1").value; //bricht hier ab
	alert(a);
	x.document.getElementById("ergebnis2").innerHTML="abs";
   }
  </script>
 </head>
<body>
	<input type="button" value="next" onclick="next()">
</body>
</html>


____
seite2.html
<html>
 <head></head>
  <body>
   <div id="ergebnis">abcdef</div>
    <br/>
	<input type="text" id="test1" value="test">
    <div id="ergebnis2"></div>
  </body>
</html>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Mittels Javascript Werte auf die nächste html übergeben

        Der Martin
        +2 Informationen zu den Bewertungsregeln

        Hallo,

           function next(){
	var x = window.open("seite2.html");
	var i=x.document.getElementById("ergebnis");
	alert(i); //null
	[...]

        Moment, Moment, nicht so schnell! Du sagst hier dem Kellner: "Für mich bitte einmal Schnitzel mit Pommes", und Sekundenbruchteile später greifst du nach dem Besteck und erwartest, dass ein Teller mit Schnitzel und Pommes vor dir steht. So geht's natürlich nicht!

        Mit dem Aufruf von window.open() machst du der Javascript-Engine erstmal nur klar, was du gern hättest. Das neue window-Objekt für diesen Vorgang wird zwar sofort angelegt, aber zunächst nur als Skelett. Die tatsächliche Umsetzung der Anforderung, also das Laden der angeforderten Ressource, geschieht dann, wenn der Browser mal wieder "Zeit dafür hat", also frühestens, wenn der aktuelle Script-Block beendet ist. Darauf musst du warten.

        Dafür gibt's prinzipiell zwei Möglichkeiten: Polling (immer wieder nachsehen) oder Callback (sich benachrichtigen lassen).

        Polling wäre hier IMO eine schlechte Idee: Du kannst ein Stück JS mit setTimeout() oder setInterval() so lange immer wieder aufrufen und beenden, bis dein getElementById() im frischen Dokument nicht mehr null ergibt.

        Eleganter ist die Callback-Strategie: Unmittelbar nach dem Aufruf von window.open() gibst du dem frischen window-Objekt einen onload-Handler, so dass eine Funktion deiner Wahl aufgerufen wird, wenn das gewünschte Dokument fertig geladen ist. Dann und erst dann kannst du auf das neue Dokument zugreifen.
        Bei der Gelegenheit könntest du auch gleichzeitig einen onerror-Handler dranhängen, so dass du auch eine Rückinfo kriegst, wenn das Laden fehlschlägt.

        So long,
         Martin

        Beitrag melden
        +2
        Informationen zu den Bewertungsregeln

      2. Mittels Javascript Werte auf die nächste html übergeben

        Auge (Versionen)
        – Informationen zu den Bewertungsregeln

        Hallo

        danke für die schnelle Antwort dies habe ich bereits probiert ohne erfolg hier einkleiner Auszug:

        Martin hat völlig recht. Das ist ein Timing-Problem.

        Ich habe mal, ungelenk, wie ich in JS bin, deinen Code angepasst.

        function next(){
x = window.open("seite2.html");
}
function overnext() {
var i = x.document.getElementById("ergebnis").textContent;
alert(i);
var a = x.document.getElementById("test1").value;
alert(a);
x.document.getElementById("ergebnis2").innerHTML = "abs";
}
function weiteres() {
var elem1 = document.getElementById("erster");
var elem2 = document.getElementById("zweiter");
elem1.addEventListener("click", next, false);
elem2.addEventListener("click", overnext, false);
}
window.addEventListener("load", weiteres, false);

        Ich habe aus deiner einen Funktion zwei gemacht, also das Öffnen des Fensters vom Auslesen und Setzen der Texte getrennt, und eine weitere für das Deklarieren der Eventlistener gebaut. Ich brauche nun auch zwei Buttons, die über ihre IDs angesprochen werden.

        <input type="button" value="next" id="erster">
<input type="button" value="overnext" id="zweiter">

        Nun kann ich die Texte von #ergebnis und #test1 lesen sowie den Text in #ergebnis2 setzen.

        Tschö, Auge

        --
        Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
        Terry Pratchett, „Gevatter Tod“
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Mittels Javascript Werte auf die nächste html übergeben

          Orlok
          – Informationen zu den Bewertungsregeln

          Hallo

          function weiteres() {
var elem1 = document.getElementById("erster");
var elem2 = document.getElementById("zweiter");
elem1.addEventListener("click", next, false);
elem2.addEventListener("click", overnext, false);
}
window.addEventListener("load", weiteres, false);

          FYI: Die Capturing-Variable auf false zu setzen ist unnötige Schreibarbeit, da dies ohnehin der Defaultwert ist.

          element.addEventListener('event', callback);

          ...genügt also völlig, sofern man das Event nicht in der Capturing-Phase abfangen will (oder muss).

          Gruß,

          Orlok

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        2. Mittels Javascript Werte auf die nächste html übergeben

          Der Martin
          – Informationen zu den Bewertungsregeln

          n'Abend,

          Ich habe mal, ungelenk, wie ich in JS bin, deinen Code angepasst.

          dazu sage ich jetzt mal nichts, aber ...

          function next(){
x = window.open("seite2.html");
}
function overnext() {
var i = x.document.getElementById("ergebnis").textContent;
alert(i);
var a = x.document.getElementById("test1").value;
alert(a);
x.document.getElementById("ergebnis2").innerHTML = "abs";
}
function weiteres() {
var elem1 = document.getElementById("erster");
var elem2 = document.getElementById("zweiter");
elem1.addEventListener("click", next, false);
elem2.addEventListener("click", overnext, false);
}
window.addEventListener("load", weiteres, false);

          In diesem Stück Code steckt IMO noch ein Denkfehler: Du registrierst das load-Event hier für das window-Objekt des schon bestehenden Fensters, anstatt für das window-Objekt, das mit window.open() neu erzeugt wird.

          Ich hab's nicht getestet, aber nach meinem Verständnis kannst du in dieser Konstellation bis zum Sankt-Nimmerleins-Tag auf das load-Event warten.

          So long,
           Martin

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Mittels Javascript Werte auf die nächste html übergeben

            Auge
            – Informationen zu den Bewertungsregeln

            Hallo

            function next(){
x = window.open("seite2.html");
}
function overnext() {
var i = x.document.getElementById("ergebnis").textContent;
alert(i);
var a = x.document.getElementById("test1").value;
alert(a);
x.document.getElementById("ergebnis2").innerHTML = "abs";
}
function weiteres() {
var elem1 = document.getElementById("erster");
var elem2 = document.getElementById("zweiter");
elem1.addEventListener("click", next, false);
elem2.addEventListener("click", overnext, false);
}
window.addEventListener("load", weiteres, false);

            In diesem Stück Code steckt IMO noch ein Denkfehler: Du registrierst das load-Event hier für das window-Objekt des schon bestehenden Fensters, anstatt für das window-Objekt, das mit window.open() neu erzeugt wird.

            Neenee, das ist schon so gewollt gewesen. Schließlich soll auch beim Test im ersten Dokument nichts vor der Zeit funktionieren. Dass das neue Fenster/Dokument geladen ist, stelle ich in der lokalen Umgebung implizit sicher, indem ich einen anderen Button drücken muss. Die Zeit bis zum Druck des Buttons sollte ausreichen, zumal gerade dann, wenn es explizit darum geht, das Laden abzuwarten und man dies dementsprechend auch tut.

            Ich hab's nicht getestet, aber nach meinem Verständnis kannst du in dieser Konstellation bis zum Sankt-Nimmerleins-Tag auf das load-Event warten.

            Das war kein Codebeispiel zur produktiven Verwendung, sondern nur zum Beweis deiner Timingthese. Dafür reicht's allemal.

            Tschö, Auge

            --
            Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
            Terry Pratchett, „Gevatter Tod“
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

      3. Mittels Javascript Werte auf die nächste html übergeben

        Der kleine Diktator
        – Informationen zu den Bewertungsregeln

        Dein ansatz ist verkehrtherum, machs besser so, dass die Daten für das neue Fenster per ajax kommen, da kannst du sofort darafu zugreifen in dem Moment, wnn die Response einschlägt. Und für window.open(URL, [..]) erstellst du mit derselben AJAx-Response einen BlobURL, so kannst Du auch ein neues Fenster öffnen.

        -Alfred

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      4. Mittels Javascript Werte auf die nächste html übergeben

        Andre
        – Informationen zu den Bewertungsregeln

        vielen dank euch allen :) hab bekommen was ich gesucht hatte, ich habe mich schon öfters gefragt, wie es sein kann, dass sofort, auf das neue Window reagiert werden kann... hab schon öfters mit setTimeout probiert jedoch ohne erfolg... Grund war setTimeout(func(), 2000). statt setTimeout(func,2000).

        Andere Frage eventListener sind diese sinnvoller als onclick methoden? bzw. irgendwelche sicherheitsrelevanten Aspekte?

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Mittels Javascript Werte auf die nächste html übergeben

          Orlok
          – Informationen zu den Bewertungsregeln

          Hallo

          Andere Frage eventListener sind diese sinnvoller als onclick methoden?

          Ein sehr wesentlicher Grund, warum die addEventListener-Methode vorzuziehen ist, ist dass alle anderen Methoden die Events nur in der Target- oder Bubbling-Phase abfangen können.

          Es gibt aber einige Events, wie beispielsweise focus, die über keine Bubbling-Phase verfügen, das heißt, Event Delegation wäre ohne die addEventListener-Methode für diese Events nicht möglich.

          Gruß,

          Orlok

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        2. Mittels Javascript Werte auf die nächste html übergeben

          Auge
          – Informationen zu den Bewertungsregeln

          Hallo

          Andere Frage eventListener sind diese sinnvoller als onclick methoden? bzw. irgendwelche sicherheitsrelevanten Aspekte?

          Die Eventlistener haben weitere Vorteile. Dazu gehört z.B., dass sie nicht mehr im HTML-Code verstreut sind, sondern gemeinsam im JS-Code notiert werden. Das entspricht einerseits dem System, den Code verschiedener Sprachen voneinander zu trennen (HTML-Dokument, eingebundene CSS- und JS-Ressourcen), aber auch, dass du sie so z.B. kollektiv für einen Elementtyp erzeugen kannst, wo du im HTML-Code den Listener für jedes Element einzeln notieren müsstest.

          Tschö, Auge

          --
          Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
          Terry Pratchett, „Gevatter Tod“
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln