HTML implementiert die Funktion zum automatischen Aktualisieren oder Öffnen eines neuen Fensters für den URL-Link des Elements href

HTML implementiert die Funktion zum automatischen Aktualisieren oder Öffnen eines neuen Fensters für den URL-Link des Elements href

Manchmal möchten wir eine solche Funktion implementieren: Klicken Sie auf einen Link. Wenn der Link im Browser geöffnet wurde, aktualisieren Sie das geöffnete Linkfenster. Wenn der Link nicht geöffnet wurde, öffnen Sie die Linkseite in einem neuen Fenster.

Dies ist eine sehr gute Funktion zur Verbesserung des Benutzererlebnisses, mit der das Öffnen doppelter und redundanter Seiten in Browser-Tabs wirksam vermieden werden kann.

Der Schlüssel ist: Wie erreicht man das?

Verwenden Sie das Zielattribut des A-Tags:

Sowohl das Link-Element als auch das Formular-Element haben ein Attribut namens target. Zu den unterstützten Werten gehören die folgenden:

  • _self: Standardwert. Der aktuelle Browserkontext.
  • _blank: Normalerweise eine neue Registerkarte, aber Benutzer können ihre Browser so konfigurieren, dass sie in einem neuen Fenster geöffnet werden.
  • _parent: Der übergeordnete Kontext des aktuellen Browserkontexts. Wenn kein übergeordneter Kontext vorhanden ist, verhält es sich wie _self.
  • _top: Der oberste Browserkontext. Wenn kein Vorgängerkontext vorhanden ist, verhält es sich wie _self.

Tatsächlich verfügt das Ziel über eine versteckte Funktion, nämlich dass es als bestimmte URL-Adresse oder als beliebiger benutzerdefinierter Name angegeben werden kann.

Zum Beispiel:

<a href="http://www.baidu.com" target="http://www.baidu.com">Leere Seite</a>

Wenn der Browser zu diesem Zeitpunkt bereits über eine Registerkarte mit der Adresse blank.html verfügt, wird durch Klicken auf den obigen Link kein neues Fenster geöffnet, sondern die bereits geöffnete Datei blank.html wird direkt aktualisiert. Wenn im Browser keine Registerkarte mit der Adresse blank.html vorhanden ist, ähnelt das Verhalten des Zielattributs „_blank“.

Mit anderen Worten: Wenn wir die Anforderung der automatischen Aktualisierung der Linkadresse und des Öffnens eines neuen Fensters erfüllen möchten, müssen wir lediglich den Zielattributwert des Linkelements und des Formularelements auf den Wert der Ziel-URL-Adresse setzen.

Wenn Sie also eine Registerkarte für alle Suchergebnisseiten verwenden möchten, müssen Sie andere Methoden verwenden. Das ist ganz einfach. Geben Sie einfach denselben Wert an, zum Beispiel:

<a href="blank.html?s=1" target="_search">leere Seite?s=1</a>
<a href="blank.html?s=2" target="_search">leere Seite?s=2</a>

Wie Sie sehen, verweisen href="blank.html?s=1"和href="blank.html?s=2" auf dieselbe Seite und öffnen nicht zwei neue Fenster.

Zusammenfassen

Um die Funktion der automatischen Aktualisierung eines Element-href-Links oder des Öffnens in einem neuen Fenster zu erreichen, müssen Sie nur den Zielattributwert auf denselben Wert wie den href-Attributwert setzen.

Diese Funktion wird von IE, Firefox und Chrome unterstützt, Sie können sie also bedenkenlos verwenden.

Dies ist das Ende dieses Artikels über die Implementierung der automatischen Aktualisierung oder des Öffnens eines neuen Fensters von URL-Links eines Elements href in HTML. Weitere relevante Inhalte zur Implementierung der automatischen Aktualisierung oder des Öffnens eines neuen Fensters von URL-Links in HTML finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: 

>>:  CSS kompletter Parallax-Scrolling-Effekt

Artikel empfehlen

JavaScript-Farbbetrachter

In diesem Artikelbeispiel wird der spezifische Ja...

JavaScript Dom implementiert das Prinzip und Beispiel eines Karussells

Wenn wir ein Karussell bauen wollen, müssen wir z...

10 Gründe, warum Linux immer beliebter wird

Linux wird von immer mehr Benutzern geliebt. Waru...

Analyse der Prinzipien der MySQL Slow Query-bezogenen Parameter

MySQL Slow Query, dessen vollständiger Name „Slow...

Schritte und Methoden zur Bindung von Domänennamen und IPs in der Alibaba Cloud

1 Rufen Sie die Alibaba Cloud-Konsole auf, suchen...

MySQL-Einfügungsproblem bei JSON

MySQL 5.7.8 und höher unterstützt nun einen nativ...

Tutorial zur manuellen Installation von MySQL 8.0.13

In diesem Artikel finden Sie das Tutorial zur man...

Tutorial zur Installation von MYSQL8.0 auf Alibaba Cloud ESC

Öffnen Sie das Verbindungstool. Ich verwende Moba...

Detailliertes Tutorial zur Installation von Docker auf CentOS 8

1. Frühere Versionen yum entfernen Docker Docker-...

JavaScript zum Implementieren einer dynamischen Digitaluhr

In diesem Artikel finden Sie den spezifischen Cod...