Come chiamare la funzione JavaScript invece di href in HTML

86

Ho qualche mockup in HTML

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

Ho ricevuto la risposta dal server quando ho inviato la richiesta.

Con questo mockup ho ottenuto come risposta alla richiesta AJAX che invia il mio codice al server.

Bene, va tutto bene ma quando clicco sul link il browser vuole aprire la funzione come link; significa che dopo il clic vedo la barra degli indirizzi come

javascript:ShowOld(2367,146986,2)

significa che il browser è l'URL se voglio farlo in Firebug che funziona. Ora voglio farlo, quindi quando qualcuno fa clic sul collegamento, il browser prova a chiamare la funzione già caricata nel DOM invece di provare ad aprirli nel browser.

javascript html debugging

— Brett DeWoody
fonte

Una domanda simile trova risposta in Stackoverflow stesso. stackoverflow.com/questions/1070760/…

— Scaria Sebastian

196

Quella sintassi dovrebbe funzionare bene, ma puoi provare questa alternativa.

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

o

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

RISPOSTA AGGIORNATA PER I VALORI DELLE STRINGHE

Se stai passando stringhe, usa virgolette singole per i parametri della funzione

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

— Dutchie432
fonte

Come passare una stringa che sfugge alle virgolette doppie negli argomenti? H = L'esempio ha solo numeri interi.

— jeffry copps

1

@jeffrycopps prova le virgolette singole all'interno della tua funzione

— ineedme

@ineedme Risposta Aggiornata con queste informazioni. Grazie.

— Dutchie432

9

Se hai solo come "gestore di eventi clic", utilizza <button>invece un . Un collegamento ha un significato semantico specifico.

Per esempio:

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

— Felix Kling
fonte

C'è un modo per far sembrare un pulsante un collegamento anziché un pulsante?

— Ben Page

@ Ben Page: Sì, con CSS. Almeno ottieni una buona approssimazione. Vedi la mia risposta e i commenti qui: stackoverflow.com/questions/4842953/or-javascriptvoid0/…

— Felix Kling

7

Prova a rendere il tuo javascript discreto:

dovresti usare un vero link nell'attributo href
e aggiungi un listener all'evento click per gestire ajax

— soju
fonte

hrefè facoltativo, basta ometterlo.

— Colin 't Hart

Un tag è un'ancora; non deve avere un collegamento.

— Colin 't Hart

5

Uso un po 'di CSS su un arco per farlo sembrare un collegamento in questo modo:

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");
}

— tolsen64
fonte

Il parametro della funzione "url" sopra mi fornisce la stringa "url" invece dell'url effettivo

— visrahane

Dovresti inserire l'URL effettivo nella funzione showWindow. Ad esempio: javascript: showWindow ('stackoverflow.com ' );

— tolsen64

Non riesco a codificarlo mentre lo

— creo

3

Dovresti anche separare il javascript dall'HTML.
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);

Assicurati solo che l'ultima riga nella funzione ShowOld sia:

return false;

poiché ciò interromperà l'apertura del collegamento nel browser.

— hellsgate
fonte

1

hrefè facoltativo, basta ometterlo.

— Colin 't Hart

3

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

— nico
fonte

9

Non è la soluzione migliore in quanto salterà all'inizio della pagina.

— Alex Marshall

1

Per href invece di #usarehref="javascript:void(0)

— Narayan

1

hrefè facoltativo, basta ometterlo.

— Colin 't Hart

1

hrefè opzionale per gli aelementi.

È completamente sufficiente da usare

<a onclick="ShowOld(2367,146986,2)">link text</a>

— Colin 't Hart
fonte