Nützliche onclick()-Tricks für Links

0 | 0 Kommentare | 77776 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Nützliche onclick()-Tricks für Links" mit Ihrem Wissen!

Anzeige Hier werben

Hintergrundwissen - onclick-Event

Das onclick-Event in Javascript kann einen Rückgabewert enthalten. Mit diesem ist es möglich, wie zb. die Weiterverarbeitung des Klick abzubrechen (siehe Beispiel). Somit lässt sich die Aktion hinter dem Klick ersetzen oder nur wenn bestimmte Bedingungen erfüllt sind, ausführen.

Link dessen funktion per javascript ausgehebelt ist  
HTML
1
<a href="http://www.webmasterpro.de/" onclick="return false;">Link ohne Funktion</a>

Will man diese Funktionalität für allgemeine Fälle verwenden, lohnt es sich die Logik in Javascript-Funktionen auszugliedern. Der Einfachheit halber, ist in diesem Artikel in allen Beispielen der Code direkt eingebunden. Am Ende folgt ein Beispiel mit allen Möglichkeiten und dem Code sauber in Funktionen eingegliedert.

Ersatz für target="_blank"

Da in der strikten Variante des HTML-Standards das target-Attribut entfernt wurde, ist es nicht mehr möglich mit reinem HTML einen Link in einem neuen Fenster zu öffnen. Mithilfe von Javascript ist diese Funktionalität aber schnell nachgerüstet. Hierbei wird mit window.open() das neue Fenster geöffnet. Da der Browser nun trotzdem dem normalen Link folgen würde, muss das durch return false verhindert werden.

target=&quot;_blank&quot; in javascript  
HTML
1
<a href="http://www.webmasterpro.de/" onclick="window.open(this.href, '_blank', ''); return false;">Neues Fenster</a>

Durch die Verwendung von this.href ist der Link auch ohne Javascript nutzbar.

Es kann passieren, dass der Link kein neues Fenster öffnet. Das liegt an Einstellungen des Browsers. Im Firefox beispielsweise ist es möglich target="_blank" - und somit auch _blank als Zielfenster in Javascript vollkommen zu ignorieren.

Oft kommt es vor, dass einige Links erst nach einer Abfrage aufgerufen werden sollen. Ein einfaches Beispiel hierfür wäre der Link, der einen Eintrag löscht. Mithilfe von window.confirm() kann diese Abfrage ohne neuladen geschehen.

Link, der erst nach bestätigung aufgerufen wird  
HTML
1
<a href="http://www.webmasterpro.de/" onclick="return window.confirm('Link folgen?');">Abfrage</a>

Hierbei wäre es - zumindest, falls der Link wirklich einen Eintrag löscht - natürlich sauberer mithilfe von Javascript einen Parameter wie confirmed=yes an die aufgerufen Adresse anzuhängen. Wäre dieser Parameter nicht vorhanden, so könnte man zusätzlich eine normale Abfrage über HTML anbieten.

Vollständiges Beispiel

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
    <head>
        <title>Nur ein Test</title>
        <script type="text/javascript">
            function make_unclickable(link)
            {
                return false;
            }
            
            function open_new_window(link)
            {
                window.open(link.href, '_blank', '');
                return false;
            }
            
            function ask_first(link, question)
            {
                if (typeof(question) == 'undefined')
                    question = 'Wirklich löschen?'
                return window.confirm(question);
            }
        </script>
    </head>
    <body>
        <h1>onclick()-Tricks</h1>
        <h2>Grundlage</h2>
        <p>
            <a href="http://www.webmasterpro.de/" onclick="return make_unclickable(this);">Link ohne Funktion</a>
        </p>
        <h2>target="_blank"</h2>
        <p>
            <a href="http://www.webmasterpro.de/" onclick="return open_new_window(this);">Neues Fenster</a>
        </p>
        <h2>Abfrage</h2>
        <p>
            <a href="http://www.webmasterpro.de/" onclick="return ask_first(this, 'Wirklich dem Link folgen?');">Abfrage</a><br />
            <a href="http://www.webmasterpro.de/" onclick="return ask_first(this);">Abfrage (Standardtext)</a>
        </p>
    </body>
</html>

Der erste Parameter link ist nicht in allen Fällen notwendig. Um einheitliche Funktionsparameter zu haben ist es bei Link-onclick()-Handlern allerdings von Vorteil diesen Parameter immer anzugeben. Er ist vor allem dann nützlich, wenn eine Funktion später Zugriff auf den Link benötigt.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "Nützliche onclick()-Tricks für Links" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Nützliche onclick()-Tricks für Links" hier bearbeiten.

Mitarbeiter

Kommentare: Nützliche onclick()-Tricks für Links