Popup-Fenster in JavaScript öffnen

In diesem Artikel wird eine Methode zum Öffnen eines Popup-Fensters mit JavaScript vorgestellt.

Öffnen Sie ein Popup-Fenster mit der Window-Methode open() in JavaScript

Ein Popup-Fenster ist ein weiteres Fenster, das dem Benutzer die zusätzlichen Informationen anzeigt, während das ursprüngliche Fenster geöffnet bleibt. Manchmal muss ein Popup-Fenster verwendet werden, während mit dem Benutzer auf einer Website interagiert wird.

Eines der beliebtesten Szenarien ist die Durchführung einer OAuth-Autorisierung. Wenn Sie beispielsweise versuchen, sich mit Ihrem Gmail-Konto bei einer SAAS-Anwendung anzumelden, öffnet sich ein neues Popup-Fenster und zeigt die Liste der Gmail-Konten an, aus denen Sie auswählen können, um sich bei der Anwendung anzumelden.

Das wichtige Konzept, das beim Popup-Fenster zu beachten ist, ist, dass es über eine JavaScript-Umgebung verfügt, die es sicher macht, Anwendungen von Drittanbietern und nicht vertrauenswürdige Websites auszuführen. Sehen wir uns nun an, wie wir solche Popup-Fenster erstellen können.

Die vom Objekt window bereitgestellte Methode open() öffnet ein neues Fenster. Die Syntax der open()-Methode ist unten dargestellt.

window.open(url, name, parameter)

Die Option url ist die URL der Seite, die als Popup-Fenster geöffnet werden soll. Die Option name ist der Name des zu öffnenden Fensters.

window.name definiert den Namen des Fensters im Browser. Die Option parameter ist eine Notation für die Konfigurationsoption beim Öffnen eines Fensters.

Es enthält mehrere Konfigurationen wie Höhe/Breite, Menüleiste, Symbolleiste usw.

Erstellen Sie beispielsweise eine JavaScript-Funktion popUp(), die zwei Parameter akzeptiert, url und windowName. Erstellen Sie innerhalb der Funktion eine Variable newWindow und rufen Sie die Methode open() auf, indem Sie das Objekt window in der Variablen verwenden.

Geben Sie in der Methode open() die Parameter url, windowName, height und width an. Stellen Sie die Höhe und Breite Ihrer Wahl ein.

Überprüfen Sie als Nächstes die Bedingung window.focus, und wenn sie true ist, setzen Sie den Fokus auf das neue Fenster, das Sie gerade erstellt haben, als newWindow.focus(). Geben Sie zum Schluss false zurück.

Erstellen Sie in HTML ein Anchor-Tag <a> </a>. Setzen Sie im Attribut href einige URLs Ihrer Wahl.

Erstellen Sie dann innerhalb des Anchor-Tags ein onclick-Ereignis. Rufen Sie die Funktion popUp() mit der gleichen URL wie im Attribut href und dem Fensternamen als Parameter auf.

Schreiben Sie zwischen den Anchor-Tags etwas Text, um einen anklickbaren Link zu erstellen.

Beispielcode:

function popUp(url, windowName) {
  var newWindow = window.open(url, windowName, 'height=200,width=200');
  if (window.focus) {
    newWindow.focus()
  }
  return false;
}

<a href="https://www.youtube.com/" onclick="return popUp('https://www.youtube.com/', 'youtube')">Youtube Popup</a>

Im obigen Beispiel haben wir die Youtube-URL https://www.youtube.com/ verwendet, um ein neues Popup-Fenster zu erstellen. Immer wenn das Ereignis onClick eintritt, wird ein neues Fenster erstellt.

Dann wird der Fokus auf das neu erstellte Fenster verschoben, um es als Popup anzuzeigen. Wir haben in der Funktion false zurückgegeben, damit der Browser nicht auf die im href-Attribut gesetzte URL umgeleitet wird.

Sie haben also gelernt, wie Sie mit der Methode window.open in JavaScript ein neues Popup-Fenster öffnen.