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

Schwebendes Menü, kann einen Bildlaufeffekt nach oben und unten erzielen

Der Code kann noch weiter optimiert werden. Aus Z...

So mounten Sie eine Datenfestplatte auf Tencent Cloud Server Centos

Überprüfen Sie zunächst, ob das Festplattengerät ...

So richten Sie eine VSCode-Remoteverbindung zum Server-Docker-Container ein

Inhaltsverzeichnis Ziehen Sie das Bild Ausführen ...

Lassen Sie uns im Detail darüber sprechen, wie Browser Abschlüsse betrachten

Inhaltsverzeichnis Vorwort Einführung in Closures...

So überwachen Sie die Windows-Leistung auf Zabbix

Hintergrundinformationen Ich habe kürzlich einige...

MySQL 5.7-Clusterkonfigurationsschritte

Inhaltsverzeichnis 1. Ändern Sie die Datei my.cnf...

Vue3 basierend auf der Skript-Setup-Syntax $refs-Verwendung

Inhaltsverzeichnis 1. Vue2-Syntax 2. Nutzung von ...

Detaillierte Erklärung des Prinzips und der Funktion des JavaScript-Closures

Inhaltsverzeichnis Einführung Verwendung von Vers...

MySQL-Datenbank-Master-Slave-Replikation und Lese-/Schreibtrennung

Inhaltsverzeichnis 1. Master-Slave-Replikation Ma...