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

JS implementiert einen Stoppuhr-Timer

In diesem Artikelbeispiel wird der spezifische JS...

So wählen und verwenden Sie PNG, JPG und GIF als Web-Bildformate

Welches dieser Formate (GIF, PNG oder JPG) sollte...

MySQL Dual-Machine Hot-Standby-Implementierungslösung [testbar]

Inhaltsverzeichnis 1. Konzept 2. Umgebungsbeschre...

Keine chinesische Spezialität: Webentwicklung unter kulturellen Unterschieden

Webdesign und -entwicklung sind harte Arbeit, als...

Mit CSS3 erstellter Hover-Zoom-Effekt

Ergebnis:Implementierungscode: html <link href...

So importieren Sie schnell Daten in MySQL

Vorwort: Im täglichen Studium und bei der Arbeit ...

HTML-Grammatik-Enzyklopädie_HTML-Sprachgrammatik-Enzyklopädie (unbedingt lesen)

Datenträgerbezeichnung, Eigenschaftsname, Beschre...

Verwenden von js zum Implementieren eines Zahlenratespiels

Letzte Woche gab mir der Lehrer eine kleine Hausa...

js, um einen simulierten Einkaufszentrumsfall zu erreichen

Freunde, die HTML-, CSS- und JS-Frontend lernen, ...

W3C Tutorial (13): W3C WSDL Aktivitäten

Bei Webdiensten geht es um die Kommunikation zwis...

Implementierung von Diensten im Docker für den Zugriff auf Hostdienste

Inhaltsverzeichnis 1. Szenario 2. Lösung 3. Fazit...