So rufen Sie die JavaScript-Funktion anstelle von href in HTML auf


82

Ich habe ein Modell in HTML

<a href="javascript:ShowOld(2367,146986,2)"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

Ich habe die Antwort vom Server erhalten, als ich die Anfrage gesendet habe.

Mit diesem Modell erhielt ich als Antwort eine AJAX-Anfrage, die meinen Code an den Server sendet.

Nun, alles ist in Ordnung, aber wenn ich auf den Link klicke, möchte der Browser die Funktion als Link öffnen. Das heißt, nach dem Klicken sehe ich die Adressleiste als

javascript:ShowOld(2367,146986,2)

bedeutet Browser-Sache, die URL ist, wenn ich dies in Firebug tun möchte, das funktioniert. Jetzt möchte ich das tun. Wenn jemand auf den Link klickt, versucht der Browser, die bereits im DOM geladene Funktion aufzurufen, anstatt zu versuchen, sie im Browser zu öffnen.


Eine ähnliche Frage wird in Stackoverflow selbst beantwortet. stackoverflow.com/questions/1070760/…
Scaria Sebastian

Antworten:


187

Diese Syntax sollte in Ordnung sein, aber Sie können diese Alternative ausprobieren.

<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">

oder

<a href="javascript:ShowOld(2367, 146986, 2);">

AKTUALISIERTE ANTWORT AUF STRING-WERTE

Wenn Sie Zeichenfolgen übergeben, verwenden Sie einfache Anführungszeichen für die Parameter Ihrer Funktion

<a href="javascript:ShowOld('foo', 146986, 'bar');">

Wie übergebe ich eine Zeichenfolge, die in Anführungszeichen steht? H = Das Beispiel hat nur ganze Zahlen.
Jeffrey Copps

1
@ Jeffrycopps versuchen Sie einfache Anführungszeichen innerhalb Ihrer Funktion
ineedme

@ineedme Antwort Mit diesen Informationen aktualisiert. Vielen Dank.
Dutchie432

9

Wenn Sie nur als "Klickereignishandler" haben, verwenden Sie <button>stattdessen ein. Ein Link hat eine bestimmte semantische Bedeutung.

Z.B:

<button onclick="ShowOld(2367,146986,2)">
    <img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>

Gibt es eine Möglichkeit, eine Schaltfläche wie einen Link anstelle einer Schaltfläche aussehen zu lassen?
Ben Seite

@ Ben Page: Ja, mit CSS. Zumindest erhalten Sie eine gute Annäherung. Siehe meine Antwort und die Kommentare hier: stackoverflow.com/questions/4842953/or-javascriptvoid0/…
Felix Kling

7

Versuchen Sie, Ihr Javascript unauffällig zu machen:

  • Sie sollten einen echten Link im href-Attribut verwenden
  • und fügen Sie beim Klicken ein Listener hinzu, um Ajax zu verarbeiten

hrefist optional, lass es einfach weg.
Colin 't Hart

Ein a-Tag ist ein Anker. Es muss keinen Link haben.
Colin 't Hart

5

Ich benutze ein wenig CSS für eine Zeitspanne, damit es wie ein Link aussieht:

CSS:

.link {
    color:blue;
    text-decoration:underline;
    cursor:pointer;
}

HTML:

<span class="link" onclick="javascript:showWindow('url');">Click Me</span>

JAVASCRIPT:

function showWindow(url) {
    window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}

Der obige Funktionsparameter 'url' gibt mir die Zeichenfolge "url" anstelle der tatsächlichen URL
visrahane

Sie sollten die tatsächliche URL in die Funktion showWindow einfügen. Zum Beispiel: Javascript: showWindow (' stackoverflow.com' );
Tolsen64

Ich kann das nicht hart codieren, da ich es mit dom erstelle und ich habe keine Kontrolle über die URL
visrahane

3

Sie sollten auch das Javascript vom HTML trennen.
HTML:

<a href="#" id="function-click"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

Javascript:

myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);

Stellen Sie einfach sicher, dass die letzte Zeile in der ShowOld-Funktion lautet:

return false;

Dadurch wird verhindert, dass der Link im Browser geöffnet wird.


hrefist optional, lass es einfach weg.
Colin 't Hart

3

<a href="#" onclick="javascript:ShowOld(2367,146986,2)">


8
Nicht die beste Lösung, da dies zum Anfang der Seite springen wird.
Alex Marshall

Für href statt zu #verwendenhref="javascript:void(0)
Narayan

hrefist optional, lass es einfach weg.
Colin 't Hart

1

hrefist für aElemente optional .

Es ist völlig ausreichend zu verwenden

<a onclick="ShowOld(2367,146986,2)">link text</a>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.