Heim > Web-Frontend > CSS-Tutorial > Wie öffne ich ein Popup-Fenster in benutzerdefinierter Größe mit JavaScript?

Wie öffne ich ein Popup-Fenster in benutzerdefinierter Größe mit JavaScript?

Mary-Kate Olsen
Freigeben: 2024-10-30 07:23:02
Original
689 Leute haben es durchsucht

How to Open a Custom-Sized Pop-Up Window with JavaScript?

Ein neues Fenster mit benutzerdefinierten Abmessungen öffnen

Bei der Webentwicklung ist es manchmal wünschenswert, für einen bestimmten Zweck ein neues Fenster zu öffnen. beispielsweise das Teilen von Inhalten auf einer Social-Media-Plattform. Die Verwendung von target="_blank" bietet jedoch möglicherweise nicht die gewünschten Anpassungsoptionen hinsichtlich der Abmessungen und des Verhaltens des neuen Fensters.

Um diese Aspekte zu steuern, kann JavaScript eingesetzt werden, um das gewünschte Ergebnis zu erzielen. Betrachten Sie den folgenden Codeausschnitt:

<code class="html"><a href="facebook.com/sharer" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">Share this</a></code>
Nach dem Login kopieren

Dieser Code erreicht Folgendes:

  1. Das Attribut „target="_blank" wird entfernt, um das Öffnen eines neuen Tabs zu verhindern.
  2. Ein Onclick-Handler wird hinzugefügt, um JavaScript aufzurufen, wenn auf den Link geklickt wird.
  3. window.open()-Funktion wird mit bestimmten Parametern aufgerufen:
    a. this.href: Die URL zum Teilen.
    b. 'mywin': Der Name des neuen Fensters.
    c. Eine Reihe von durch Kommas getrennten Eigenschaften:
    i. links und oben: Gibt die Position des Fensters auf dem Bildschirm in Pixeln an.
    ii. Breite und Höhe: Definiert die Abmessungen des Fensters in Pixel.
    iii. toolbar=1: Gibt an, dass das Fenster eine Symbolleiste anzeigen soll.
    iv. resizable=0: Verhindert, dass der Benutzer die Größe des Fensters ändert.

Das obige ist der detaillierte Inhalt vonWie öffne ich ein Popup-Fenster in benutzerdefinierter Größe mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage