dort surfen Sie glücklich auf einer Website. Sie klicken auf einen Link und befinden sich plötzlich auf einer anderen Website, die aufgefordert wird, eine Datei herunterzuladen. Was ist dort passiert? Nervt, nicht wahr? Es muss einen besseren Weg geben, um Ihren Besuchern anzuzeigen, wohin ein Link führt und welche Art von Datei. Um diesen kleinen Ärger zu lösen, habe ich ein bisschen JavaScript und CSS geschrieben, das hübsche kleine Symbole nach den Links hinzufügt - abhängig von der Dateierweiterung und dem Speicherort -, um dem Benutzer die Art des Dokuments anzuzeigen, die sie geladen haben.
Sie können den Code hier herunterladen und ein Beispiel sehen.
Die Hauptüberlegungen beim Erstellen dieser Funktionalität waren:
Warum sich die Entfernung von einer CSS-Lösung wegweist?
a[href$='.doc'] { <br>
display: inline-block; <br>
padding-left: 16px; <br>
background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}
Warum sollten Sie es mit einem Skript tun, wenn die meisten modernen Browser die Symbole mit nur CSS anzeigen?
Die Antwort ist einfach: IE6. Alle anständigen Browser unterstützen CSS3 -Attribut -Selektoren… außer IE6. Dieses Stück Scripting mit CSS lässt IE6 gut spielen; Tatsächlich funktioniert es sogar in IE5.5.Bevor wir anfangen, möchte ich die hervorragenden und kostenlosen Seiden -Ikonen von Mark James bei Famfamfam anerkennen, die wir in diesem Artikel verwenden werden.
Außerdem, Kredit, wo Kredit fällig ist: Dieser Artikel wurde von dem Stück -Symbol von Textlinks mit CSS von Alexander Kaiser inspiriert, was wiederum von Ask the CSS -Typ inspiriert wurde, die Hyperlink -Cues mit CSS zeigt. Darüber hinaus habe ich einige hervorragende Funktionen verwendet, die von Sitepoint von James Edwards geschrieben wurden, und ein paar weitere aus der Kern -JavaScript -Bibliothek, geschrieben von Kevin Yank und Cameron Adams und im SitePoint -Buch, einfach JavaScript.
verewigt.Kurz gesagt: Wir nehmen alle Links auf der Seite auf, erarbeiten Sie die Dateierweiterung, auf die sie Links verweist, und fügen dann das entsprechende Symbol nach dem Link hinzu. Hübsch.
Um alles funktionieren zu lassen, sind drei Dateien beteiligt:
Wenn Sie nun die WHYS UND WO FORMEN ADFEPEPEPEPEN und sie Ihrer Seite nur hinzufügen möchten, ist hier die Kurzversion:
Um den Einfachheit halber habe ich mich entschieden, die Funktion nach dem Laden des DOM aus dem HTML aufzurufen. Es gibt andere Möglichkeiten, dies mit JavaScript zu erreichen, aber sie liegen außerhalb des Rahmens dieses Artikels.
Die vollständige Erklärung
Konfiguration
Um die Dinge einfach zu halten, ist der größte Teil des Setups bereits für Sie durchgeführt. Sie müssen die Konfiguration nur ändern, wenn Sie die Symbole oder Dateierweiterungen ändern müssen. Es gibt zwei Orte, an denen diese Änderungen vorgenommen werden können: das JavaScript (ikonize.js) und die CSS -Datei (ikonize.css).
konfigurieren Sie ikonize.js
oben in der Datei sehen Sie alle Konfigurationsvariablen: classprefix, classexternal und classiconloc.
a[href$='.doc'] { <br>
display: inline-block; <br>
padding-left: 16px; <br>
background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.
classExternal is the name of the CSS class you want to use to show a link to an external site.
Welche Links erhalten ein Symbol?
Um zu definieren, auf welche Art von Datei der Link geht, werden wir uns mit der Dateierweiterung befassen. Die Dateitypen sind in zwei Gruppen aufgeteilt: diejenigen, die eindeutige Symbole wie Torrent -Dateien haben, und diejenigen, die das gleiche Symbol teilen, jedoch unterschiedliche Dateierweiterungen haben, z. B. Flash -Dateien (.fla und .swf).
Gruppierungsdateierweiterungen, die das gleiche Symbol teilen, speichert Ihnen Hunderte von CSS -Klassen und -Symbolen. Um dies zu erreichen, habe ich zwei Arrays erstellt.
Das erste Array, individualClassArray, enthält die Dateierweiterungen aller Links mit einzelnen Symbolen. Die Basis des CSS -Klassennamens entspricht der Dateierweiterung. Das heißt, eine Textdatei wird mit "TXT" verwiesen und der CSS -Klassenname ist der CLASSPREFIX (vor früher) und "Txt" den Basis -CSS -Klasse -Namen, wobei in diesem Fall eine CSS -Klasse mit dem Namen "IKON_TXT" erstellt wird.
.a[href$='.doc'] { <br>
display: inline-block; <br>
padding-left: 16px; <br>
background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}
classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.
Hinweis: Dateierweiterungen schließen den Punkt aus, dh XLS nicht .xls. Für die maximale Portabilität hat der verwendete tatsächliche CSS -Klassenname ein Präfix wie "ikon_", das wir zuvor konfiguriert haben - aber in diesen Arrays schließen wir das Präfix immer aus
aus. Eine Flash -CSS -Klasse wird also immer eher als "Flash" als als "ikon_flash" bezeichnet.externe Links
Um herauszufinden, ob ein Link eine externe Site ist, müssen wir den Hostnamen der aktuellen Seite kennen.
dafür verwenden wir:
classExternal is the name of the CSS class you want to use to show a link to an external site.
Dies belegt den Standort des aktuellen Dokuments und erhält den Domänennamen mithilfe der QualifyHref -Funktion, um sicherzustellen, dass wir eine voll qualifizierte Adresse und die Parseurl -Funktion haben, um den Hostnamen zu erhalten. (Beide Funktionen wurden von unserem ansässigen JavaScript Guru Brothercake geschrieben und in seinem Blog -Beitrag behandelt). Wenn wir später die Klassen für die externen Links hinzufügen, verwenden wir diesen Hostnamen, um herauszufinden, ob der Link extern auf unserer Website ist.
Der Code, der die Arbeit tatsächlich macht
Jetzt müssen wir alle Links über die Seite mit document.getElementsByTagName ("a") abrufen und die Dateierweiterung des Links bestimmen.
Wir tun dies mit den Funktionen an Parseurl und QualifyHref erneut.
Nehmen Sie zuerst den HREF -Wert des A -Elements:
Analysieren Sie den Wert als nächstes, um weitere Informationen über den Link zu erhalten:
Dann erhalten Sie die Erweiterung für den Link:
Fileext = uRl.Extension;
Dann müssen wir diese Links durchlaufen und herausfinden, ob sie ein Symbol benötigen. Hier wird es ein bisschen schwieriger. Wir müssen ClassArray und jedes der Arrays, die es enthält, durchlaufen. Wir tun dies, indem wir eine Schleife in einer Schleife ausführen. Ja, das ist eine Schleife in einer Schleife in einer Schleife! Dieses haarige Stück Code sieht folgendermaßen aus:
a[href$='.doc'] { <br>
display: inline-block; <br>
padding-left: 16px; <br>
background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}Benötigt dieser Link ein Symbol?
Um herauszufinden, ob wir ein Symbol hinzufügen müssen, vergleichen wir die Dateierweiterung des Links mit jeder der in unseren Arrays aufgeführten Erweiterungen.
classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.
classExternal is the name of the CSS class you want to use to show a link to an external site.
Links zu externen Websites
trainieren, wenn sich der Link zu einer externen Website befindet
externalIconLoc is the location of the image to use for the external icon.
.
IndividualClassArray = Array('txt', 'xls', 'css', 'torrent');Die CSS -Klassen
Kehren wir jetzt zur CSS -Datei zurück.
Hier ist unsere CSS -Klasse, um das Symbol zu .DOC -Dateien hinzuzufügen. Beachten Sie, dass der Klassenname mit "Ikon_" und dann der Dateierweiterung "doc" vorangestellt ist. Diese Klasse stellt im Grunde genommen ein bisschen Polster in die Ober- und Unterseite und rechts neben dem Link. Es fügt dann ein Hintergrundbild des Symbols in diesen Raum hinzu.
classArray = Array( <br>
IndividualClassArray, <br>
Array('flash', 'swf', 'fla') <br>
);Für unsere externen Link -Symbole verwenden wir eine etwas andere Klassenstruktur. Wir fügen etwas Polster oben und unten hinzu, um sicherzustellen, dass unser Symbol randlos ist.
url = parseURL(qualifyHREF(document.location.href)).hostname;
Wenn Sie die Klassikvariable geändert haben, vergessen Sie nicht, diese Klassennamen zu übereinstimmen.
Der Link muss über eine Dateierweiterung verfügen, damit ein Symbol dem Link zugewiesen wird (es sei denn, es handelt sich um eine externe Site). Das Skript erkennt auch keine query-basierten Navigationslinks. Wenn CSS deaktiviert ist, wird nur das externe Link -Symbol angezeigt. Wenn JavaScript deaktiviert ist, gibt es keine sichtbaren Änderungen an der Seite.
ikonize ist eine schnelle und einfache Möglichkeit, visuell aussagekräftige Symbole nach Links hinzuzufügen. Das Skript funktioniert in IE5.5 und kann unabhängig von CSS3 -Attributauswahlern arbeiten. Wie zu erwarten ist, verschlechtert sich das Skript gut und ist leicht zu konfigurieren. Ich hoffe du findest es nützlich!
var link = document.createelement ('a'); Die URL der Seite, auf die wir verlinken möchten. Anschließend setzen wir den Text des Links und fügen schließlich den Link zum Körper des Dokuments hinzu. Dieses Attribut gibt an, wo das verknüpfte Dokument geöffnet werden soll. Es kann auf "_blank" eingestellt werden, um das Dokument in einem neuen Fenster oder einer neuen Registerkarte "_self" zu öffnen, um das Dokument im selben Frame zu öffnen, wie es geklickt wurde (dies ist Standard), "_parent", um das Dokument im übergeordneten Frame oder "_top" zu öffnen, um das Dokument im gesamten Körper des Fensters zu öffnen. Hier ist ein Beispiel:
var link = document.createelement ('a');
link.href = "https://www.example.com"; Das Attribut wird auf "_blank" gesetzt, was bedeutet, dass der Link in einem neuen Fenster oder einer neuen Registerkarte geöffnet wird. Dieses Attribut enthält zusätzliche Informationen zum Link, z. B. den Namen des verknüpften Dokuments, und wird häufig als Tooltip angezeigt, wenn sich die Maus über den Link bewegt. Hier ist ein Beispiel:
var link = document.createelement ('a');
link.href = "https://www.example.com"; Um zu Beispielen zu gehen, wird dies als Tooltip angezeigt, wenn sich die Maus über den Link bewegt.
var link = document.getElementById ('myLink');
link.parentnode.removechild (link);
var link = document.getElementById ('myLink'); Mit der Immobilie "Stil" gestaltet. Diese Eigenschaft wird verwendet, um Inline -Stile aus einem Element hinzuzufügen, zu ändern oder zu entfernen. Hier ist ein Beispiel:
var link = document.getElementById ('mylink');
link.style.color = "rot"; Ereignishörer zu einem Hyperlink mit JavaScript? Diese Methode erhöht einen Ereignishandler an das angegebene Element. Hier ist ein Beispiel:
var link = document.createelement ('a'); Datei ";
document.body.Appendchild (link);
In diesem Code erstellen wir zunächst ein neues Ankerelement und setzen dann sein HREF -Attribut auf die URL der Datei, die wir herunterladen möchten. Anschließend setzen wir das Download -Attribut auf den Namen der Datei und fügen schließlich den Link zum Körper des Dokuments hinzu.
var link = document.createelement ('a'); "Mailto: Beispiel@example.com". Anschließend setzen wir den Text des Links und fügen schließlich den Link zum Körper des Dokuments hinzu.
Das obige ist der detaillierte Inhalt vonHilfreiche Hyperlinks mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was soll ich tun, wenn meine Windows-Lizenz bald abläuft?
Was sind die Definitionen von Arrays?
Welche Java-Dateiübertragungsmethoden gibt es?
Einführung in die Plug-Ins, die für die Ausführung von Java durch vscode erforderlich sind
Ajax-Lösung für verstümmelten chinesischen Code
So übergeben Sie einen Wert an die Vue-Komponente
xrp Ripple Neueste Nachrichten
Ripple-Kaufprozess
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
