2016-08-24 4 views
-1

Ich habe eine Seite wie folgt definiert:Warum ist meine Callback-Funktion nicht definiert?

<body> 
    <div id="container"> 
     <p> 
      <input id="myButton" type=button onclick=window.open('LandingPage.html'); value="Launch Search App"> 
     </p> 
    </div> 
    <script> 
     function cb(msg) { console.log(msg); } 
     myButton.addEventListener('click', cb); 
    </script> 
</body> 

Diese Seite zum Einrichten einer Callback-Funktion für eine sekundäre Seite verantwortlich ist. Die Callback-Funktion scheint eingerichtet zu sein, zumindest nach F12-Entwicklertools, wo ich ein PointerEventPrototype erstellt sehe. Die PointerEventPrototype ist nicht vorhanden, wenn ich die Zeile ausschließe, die die addEventListener() enthält, die den Rückruf einrichtet, also glaube ich, dass es so weit funktioniert.

<body> 
    <div id="container"> 
     <p> 
      <input type=button value="Save" onclick="click_function()"> 
     </p> 
    </div> 
    <script> 
     function click_function() { 
      var message = "Save button clicked!"; 

      console.log(message); 
      cb(message); 
     } 
    </script> 
</body> 

Die zweite Seite enthält eine Schaltfläche Speicher, die an dem Callback-Funktion Setup auf der ersten Seite reagieren sollten:

Klick auf die Schaltfläche auf der ersten Seite startet ein weiteres Fenster, um die zweite Seite enthält, unten . Wenn auf die Schaltfläche Speichern geklickt wird, "Speichern Schaltfläche geklickt!" wird an die Konsole ausgegeben, aber die folgende Zeile, cb(message), löst einen Fehler aus, der besagt, dass cb nicht definiert ist. Wie kann das undefiniert sein? Muss ich die Callback-Funktion mit einer anderen Syntax aufrufen?

+5

Ihre 'cb()' Funktion ist auf einer Seite definiert, und Sie versuchen, sie von einer * anderen * Seite aufzurufen. – Pointy

+0

Ihre beiden Funktionen sollten auf derselben Seite definiert werden. –

Antwort

1

cb existiert nur auf der ersten Seite. Wenn sie auf dem gleichen Ursprung haben, können Sie Ihre zweite Seite zum globalen window der ersten Seite bezieht über seine opener global, so:

opener.cb(message); 

Das funktioniert nur, weil cb ein global auf der ersten Seite ist, so es ist eine Eigenschaft des Objekts window.

Trotzdem gesagt, es kann ein sauberer Entwurf sein, web messaging zu verwenden, und es kommt mit dem Vorteil, dass es auch Cross-Herkunft arbeiten wird. Anstatt eine Seite zu erreichen und eine Funktion in einer anderen aufzurufen, senden Sie mit Web-Messaging eine Nachricht an die Seite und lassen sie die Nachricht so behandeln, wie sie es für richtig hält. Es gibt ein vollständiges, einfaches Beispiel in my answer here.

+0

Mein Verständnis davon, wie Callbacks tatsächlich funktionieren, könnte falsch sein und Web-Messaging könnte das sein, was ich brauche. Als ich den Rückruf einrichtete, dachte ich, ich würde Code senden, der zu einem späteren Zeitpunkt ausgeführt wird. In diesem Beispiel simuliert die Schaltfläche Speichern den Speichervorgang und gibt eine Nachricht an die Hauptseite zurück. Mit der Methode opener.cb() habe ich einfach Code ausgeführt, der auf einer Seite in einer anderen existiert. Die Nachricht wurde an die Konsole der zweiten Seite ausgegeben und nicht wirklich an die erste Seite zurückgesendet, die auf dieser Konsole angezeigt wurde. Hier scheint mir Web-Messaging besser geeignet zu sein. – DenaliHardtail

Verwandte Themen