JS Daten an popup senden

[Chris]

Liebe Programmiergemeinde, ich weiß jetzt echt keinen besseren Ausweg mehr als mich an die echten Profis zu wenden. Ich schlage mich seit vielen Tagen mit einem JS Problem (Problem allerdings nur für mich) herum...

Mein Ziel lautet, ein popup fenster mit einem Formular zu öffnen und gleich ein paar Daten hinterherzuschicken, die sogleich ins Formular eingetragen werden.

Was ich dabei nicht schaffe, ist das Senden von Daten an das popup.

So öffne ich das popup:

fenster = window.open("Empfaenger.html","popup","width=500,height=300,resizable=yes,location=no,scrollbars=yes");

So schicke ich eine Nachricht an das popup:

window.postMessage("Testnachricht", 'http://localhost');

So empfange ich die Nachricht: window.addEventListener('message', function(event) { document.getElementById('Nachricht').innerHTML = event.data; });

Mir ist klar, dass es irgendwie mit der Adressierung zu tun haben muss, JS zählt aber nicht zu meiner Profession und ich komme eher durch Probieren als Studieren weiter, das dauert halt dreimal so lange... (oder eben gar nicht)

Hintergrund von dem Ganzen: Ich möchte ein ziemlich umfangreiches Formular auf mehrere popups aufteilen und ihm dadurch mehr Struktur geben. Dazu sollen bei erneutem Aufruf des popups vorher schon eingetragene Daten übergeben werden.

Den Datenfluss in die andere Richtung (Popup zu Sender) hab ich übrigens geschafft...

Ich hoffe, mit eurer Hilfe jetzt etwas weiter zu kommen :-)

[Matthias Scharwies]

Guten Morgen,

• JavaScript/Tutorials/Fenster-_und_Frameszugriff
  Von Fenster zu Fenster reden

Hintergrund von dem Ganzen: Ich möchte ein ziemlich umfangreiches Formular auf mehrere popups aufteilen und ihm dadurch mehr Struktur geben. Dazu sollen bei erneutem Aufruf des popups vorher schon eingetragene Daten übergeben werden.

Auf mobilen Geräten sehen popups nicht so gut aus.

Daher gibt es oft mehrteilige Formulare, bei denen die Abschnitte nacheinander auf der gleichen Seite eingeblendet werden.

• Formulare #Mehrteilige Formulare

Herzliche Grüße
Matthias Scharwies

[Robert B.]

Moin Chris,

Mein Ziel lautet, ein popup fenster mit einem Formular zu öffnen und gleich ein paar Daten hinterherzuschicken, die sogleich ins Formular eingetragen werden.

[…]

fenster = window.open("Empfaenger.html","popup",
  "width=500,height=300,resizable=yes,location=no,scrollbars=yes");

So schicke ich eine Nachricht an das popup:

window.postMessage("Testnachricht", 'http://localhost');

Wenn ich unsere Wiki-Seite zu postMessage richtig verstehe, musst Du diese Methode nicht für window, sondern fenster aufrufen. Hast Du das einmal probiert?

Viele Grüße
Robert

[Rolf B]

Hallo Robert,

Wenn ich unsere Wiki-Seite zu postMessage richtig verstehe, musst Du diese Methode nicht für window, sondern fenster aufrufen. Hast Du das einmal probiert?

Ja, wenn man auf dem Window-Objekt, das sich in der globalen window-Variablen befindet, eine Nachricht schickt, dann spricht man mit sich selbst.

ich komme eher durch Probieren als Studieren weiter, das dauert halt dreimal so lange... (oder eben gar nicht)

Das ist eine alte Erkenntnis: 12 Stunden im Labor können Dir bequem 20 Minuten Handbuchlesen ersparen.

Hintergrund von dem Ganzen: Ich möchte ein ziemlich umfangreiches Formular auf mehrere popups aufteilen und ihm dadurch mehr Struktur geben

Ich würde aber generell bezweifeln wollen, dass window.open() ein guter Weg ist, um ein mehrseitiges Formular (a.k.a. Wizard) zu erstellen. Da gibt es auf dem Client deutlich bessere Möglichkeiten, und eine lange, scrollbare Formularseite ist nicht die schlechteste. Einen Wizard braucht man eigentlich dann und nur dann, wenn bestimmte Formularteile davon abhängen, welche Antworten man bereits gegeben hat. Man sieht auf PCs oft, dass Wizard-Dialoge zum Einsatz kommen, die man eigentlich gar nicht bräuchte. Da hat man einen Full HD oder Quad-HD Bildschirm, und ein Programm bietet einem ein 800x600 Guckloch an, das sich nicht mal vergrößern lässt. „Strukturiertes Vorgehen“ wird als Ausrede dafür genannt - aus meiner Sicht ist das vorsätzliches Foltern des Benutzers, weil man zu faul ist, einen responsiven, scrollbaren Dialog zu erstellen. GUIs können das!

Anyroad - angesichts der Tatsache, dass Chris seine JavaScript-Kenntnisse als gering einstuft und keine Absicht hat, das zu ändern („ist nicht meine Profession“ - „lieber probieren als studieren“), wäre mein Rat hier, das mehrseitige Formular durch serverseitiges Script (also PHP) zu implementieren, trotz all der Fallstricke, die die Vor-/Zurück-Navigation des Browsers einem dabei aufspannt.

Rolf

[Chris]

Hallo Robert, und auch die anderen freundlichen Helfer 😊

Es ist tatsächlich so, dass ich meine Kenntnisse als gering einstufe, ist mehr ein Hobby. Bei jedem Fehler, den ich behebe, hebe ich ein Gläschen 😉

Das "window" steht jetzt dort, weil ich es beim Schreiben von meiner Frage als letztes probiert hab. "fenster" hab ich auch probiert... vielleicht liegt's ja an der URL, ist aber alles auf localhost...

Bei einem ähnlichen Projekt habe ich es mit PHP probiert und die Daten zwischenzeitlich in der Datenbank gebunkert. Das erschien mir dann aber zu aufwendig und ich habe jetzt meine Hoffnungen in JS gesteckt um die lästigen DB Abfragen zu umgehen. Aber wie es scheint, bin ich da auch auf dem Holzweg...

Naja, immerhin hab ich zumindest jetzt schon länger einen klaren Kopf 😂

[Rolf B]

Hallo Chris,

vielleicht liegt's ja an der URL, ist aber alles auf localhost...

Nein, die URL sollte es nicht ausmachen. postMessage ist gerade dafür da, Cross-Origin Schranken zu überspringen.

Aber vielleicht hast Du irgendwo einen JS Error drin, das würde man in den Entwicklerwerkzeugen sehen. Hast Du die, bevor die Message gepostet wird, für Start- und Zielfenster offen?

Was auch schlecht geht ist die Zuweisung des geposteten Event-Objekts an ein innerHTML. Es ist ein Objekt, d.h. du würdest als Nachricht nicht mehr als "[object Event]" oder so ähnlich sehen. An dieser Stelle ändere 2 Sachen:

• weise an textContent zu, nicht an innerHTML
• weise event.data zu, nicht das ganze event.

Nur zur Sicherheit: Dir ist klar, dass das window in Empfaenger.html ein anderes Objekt ist als das window im Sender?

Der Inhalt von fenster im Sender ist ebenfalls nicht identisch mit dem window-Objekt im Empfänger, auch wenn sich beide auf das gleiche Fenster beziehen. In fenster befindet sich lediglich eine Art Stellvertreter für das Empfängerfenster, der keine direkten Zugriffe erlaubt, aber immerhin das Übermitteln von Nachrichten.

mit PHP probiert und die Daten zwischenzeitlich in der Datenbank gebunkert.

Kann man machen, muss man aber nicht. Die $_SESSION tut's auch.

Rolf