Chris: JS Daten an popup senden

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 :-)

  1. Guten Morgen,

    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.

    Herzliche Grüße
    Matthias Scharwies

  2. 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

    1. 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

      --
      sumpsi - posui - obstruxi
      1. 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 😂

        1. 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

          --
          sumpsi - posui - obstruxi
        2. Hi there,

          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 😉

          Wenn man es in Kauf nimmt, daß ein nicht unbeträchtlicher Teil des eingenommenen Honorars in italienische und französische Spitzengewächse investiert wird, dann kann das auch bei professioneller Entwicklungsarbeit passieren. Ich weiß, wovon ich rede...😉

  3. Lieber Chris,

    Mein Ziel lautet, ein popup fenster mit einem Formular zu öffnen

    verwirf dieses Ziel am Besten sofort! Tu es einfach nicht! Du darfst weiter Deine Zeit damit vergeuden, wenn Du das unbedingt willst, aber eine gute Idee ist window.open für ein Popup noch nie gewesen.

    Halte Dich unbedingt an Matthias' Ratschlag und verfolge den Lösungsansatz mit mehrteiligen Formularen!

    Liebe Grüße

    Felix Riesterer

    1. Hi there,

      verwirf dieses Ziel am Besten sofort! Tu es einfach nicht! Du darfst weiter Deine Zeit damit vergeuden, wenn Du das unbedingt willst, aber eine gute Idee ist window.open für ein Popup noch nie gewesen.

      Berühmte letzte Worte! Leider hat uns Chris nicht verraten, wofür er dieses Formular benötigt. Prinzipiell stimmt das natürlich, aber es mag in Applikationen durchaus Anwendungsszenarien geben, wo das Sinn macht…

      1. Hallo klawischnigg,

        Sinn macht das nie. Es ergibt höchstens welchen 😜

        Für eine separate Erfassung irgendwelcher Daten kann man window.open versuchen, ja. Nur - die heutigen Brauser öffnen kein neues Window. Sondern einen neuen Tab. Man muss schon mit

        window.open("example.html", "_blank", { popup:true } );
        

        explizit ein Popup bestellen. Aber als Kette taugt das nichts, am Ende hat man drölf Popups offen und der arme User muss sie alle wieder schließen. Für ein single-page Form, das man aus dem Weg haben will, kann man es also machen. Dieses Form kann sogar den Abschluss der Erfassung zurückposten (an window.opener).

        Was ich aber erstmal ausprobieren würde, ist, ob ein langsames Laden der example.html Ressource dazu führen kann, dass die gepostete Message verloren geht. Ich würde nicht annehmen, dass das passiert, aber TESTEN würde ich es schon. Wie auch immer.

        Für mehrseitige Forms sind andere Techniken empfehlenswerter.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. Lieber Rolf,

          explizit ein Popup bestellen. Aber als Kette taugt das nichts,

          man hat mit der Kombination aus HTML, CSS und JavaScript eine solche Vielfalt an Möglichkeiten, die Darstellung einer Seite - und damit eines Formulars - zu verändern und an alle möglichen Kontexte anzupassen, dass die Notwendigkeit von window.open nicht wirklich sinnvoll erklärbar ist. Denn window.open ist die gleiche Denkweise von Frames, nur dass sich da anscheinend die allermeisten irgendwie einig sind, dass man das nicht haben und verwenden möchte.

          Liebe Grüße

          Felix Riesterer

        2. Hi there,

          Sinn macht das nie. Es ergibt höchstens welchen 😜

          Tja, wo Du recht hast, in meinem Teil des deutschen Sprachraums gehört schlampiges Sprechen zum guten Ton (wie vermutlich überall anderswo auch😉)

          Für eine separate Erfassung irgendwelcher Daten kann man window.open versuchen, ja. Nur - die heutigen Brauser öffnen kein neues Window. Sondern einen neuen Tab. Man muss schon mit

          window.open("example.html", "_blank", { popup:true } );
          

          explizit ein Popup bestellen. Aber als Kette taugt das nichts[...]

          Bin ich ja bei Dir. Mich stört nur das immer so kategorische Ausschliessen der Möglichkeit, daß es nicht Anwendungsszenarien gibt, in denen unkonventionelle Lösungen gefragt sind. Ich hab so etwas ähnliches vor ein paar Jahren benötigt und gebaut (natürlich wäre so etwas auf einem Mobilgerät komplett daneben, aber meine Applikationen sind für Einsatz am Telephon ohnehin nicht gebaut)

          Was ich aber erstmal ausprobieren würde, ist, ob ein langsames Laden der example.html Ressource dazu führen kann, dass die gepostete Message verloren geht. Ich würde nicht annehmen, dass das passiert, aber TESTEN würde ich es schon. Wie auch immer.

          Ja, Timing-Probleme durch Ladezeiten gerade in Zusammenhang zwischen DOM-Aufbau und Javascript haben auch mir schon einige Nerven gekostet...😉

      2. Lieber klawischnigg,

        Berühmte letzte Worte!

        meinst Du, weil danach die Diskussion im Nirvana endet und der OP sich nicht mehr rührt?

        Leider hat uns Chris nicht verraten, wofür er dieses Formular benötigt.

        Ich sehe noch nicht, welche Relevanz das für die Verwendung von window.open hat. Ein Formular ist zunächst ein Formular. Ein Popup ist oft eine Notlösung und in den anderen Fällen durch eine andere Herangehensweise völlig vermeidbar.

        Prinzipiell stimmt das natürlich, aber es mag in Applikationen durchaus Anwendungsszenarien geben, wo das Sinn macht…

        Nenne mir ein Szenario, in dem ein Popup in einem Formular einen Sinn hat. Meine Phantasie scheint hier zu beschränkt zu sein.

        Liebe Grüße

        Felix Riesterer