Bagaimana memanggil fungsi JavaScript daripada href dalam HTML


86

Saya memiliki beberapa mockup dalam HTML

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

Saya mendapat respon dari server ketika saya mengirim permintaan.

Dengan mockup ini saya mendapat tanggapan atas permintaan AJAX yang mengirimkan kode saya ke server.

Ya, semuanya baik-baik saja tetapi ketika saya mengklik tautan tersebut, browser ingin membuka fungsi sebagai tautan; artinya setelah klik saya melihat bilah alamat sebagai

javascript:ShowOld(2367,146986,2)

Berarti browser hal itu url jika saya ingin melakukan ini di firebug yang berfungsi. Sekarang saya ingin melakukan itu kemudian ketika seseorang mengklik link maka browser mencoba memanggil fungsi yang sudah dimuat di DOM alih-alih mencoba membukanya di browser.


Pertanyaan serupa dijawab di Stackoverflow itu sendiri. stackoverflow.com/questions/1070760/…
Scaria Sebastian

Jawaban:


195

Sintaks itu seharusnya berfungsi dengan baik, tetapi Anda dapat mencoba alternatif ini.

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

atau

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

JAWABAN DIPERBARUI UNTUK NILAI-NILAI STRING

Jika Anda meneruskan string, gunakan tanda kutip tunggal untuk parameter fungsi Anda

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

Bagaimana cara melewatkan string yang keluar dari tanda kutip ganda dalam argumen? H = Contoh hanya memiliki bilangan bulat.
jeffry copps

1
@jeffrycopps coba tanda kutip tunggal di dalam fungsi Anda
ineedme

@ineedme Jawaban Diperbarui dengan informasi itu. Terima kasih.
Dutchie432

9

Jika Anda hanya memiliki "click event handler", gunakan file <button>. Tautan memiliki makna semantik tertentu.

Misalnya:

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

Adakah cara untuk membuat tombol terlihat seperti tautan alih-alih tombol?
Ben Page

@Ben Page: Ya, dengan CSS. Setidaknya Anda mendapatkan perkiraan yang baik. Lihat jawaban saya dan komentar di sini: stackoverflow.com/questions/4842953/or-javascriptvoid0/…
Felix Kling

7

Cobalah untuk membuat javascript Anda tidak mengganggu:

  • Anda harus menggunakan tautan nyata di atribut href
  • dan menambahkan pendengar pada acara klik untuk menangani ajax

hrefbersifat opsional, hilangkan saja.
Colin 't Hart

Sebuah tag adalah sebuah jangkar; itu tidak harus memiliki tautan.
Colin 't Hart

5

Saya menggunakan sedikit CSS dalam satu rentang agar terlihat seperti tautan seperti ini:

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

Parameter fungsi 'url' di atas memberi saya string "url" alih-alih url sebenarnya
visrahane

Anda seharusnya meletakkan URL sebenarnya di fungsi showWindow. Misalnya: javascript: showWindow (' stackoverflow.com' );
tolsen64

Saya tidak dapat membuat kode keras karena saya membuatnya menggunakan dom dan saya tidak memiliki kendali atas url
visrahane

3

Anda juga harus memisahkan javascript dari 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);

Pastikan baris terakhir dalam fungsi ShowOld adalah:

return false;

karena ini akan menghentikan pembukaan tautan di browser.


1
hrefbersifat opsional, hilangkan saja.
Colin 't Hart

3

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


9
Bukan solusi terbaik karena ini akan melompat ke bagian atas halaman.
Alex Marshall

1
Untuk href alih-alih #digunakanhref="javascript:void(0)
Narayan

1
hrefbersifat opsional, hilangkan saja.
Colin 't Hart

1

href adalah opsional untuk a elemen.

Ini sepenuhnya cukup untuk digunakan

<a onclick="ShowOld(2367,146986,2)">link text</a>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.