Do czego służy wyrażenie href <a href=nańjavascript:; obj> </a>?

228

Od czasu do czasu widziałem następujący href używany na stronach internetowych. Nie rozumiem jednak, co to próbuje zrobić, ani techniki. Czy ktoś może opracować proszę?

<a href="javascript:;"></a>
John Livermore
źródło
2
Możesz w ten sposób wywołać metodę JS, jeśli się nie mylę. Javascript: SomeFunction ()
Rob
1
Nie próbuje robić niczego, czego nie można lepiej obsłużyć za pomocą odpowiedniego modułu obsługi kliknięć. Powinieneś tego unikać, ponieważ jest brzydki, niedostępny i spowodował, że ludzie używają javascript:schematu, w którym nie powinien być używany ( onclick="javascript:…")
Gareth,
2
Sprawdź to: stackoverflow.com/a/138233/908879
ajax333221

Odpowiedzi:

247

Na <a>Elementem jest nieprawidłowy HTML, chyba że ma OSOBĄ hreflub nameatrybut.

Jeśli chcesz, aby renderował się poprawnie jako link (tj. Podkreślony, wskaźnik dłoni itp.), Zrobi to tylko wtedy, gdy będzie miał hrefatrybut.

Dlatego taki kod jest czasami używany jako sposób tworzenia linku, ale bez konieczności podawania rzeczywistego adresu URL w hrefatrybucie. Deweloper najwyraźniej chciał, aby sam link nic nie robił, i to był najłatwiejszy sposób, jaki znał.

Prawdopodobnie ma jakiś kod zdarzenia javascript w innym miejscu, który jest uruchamiany po kliknięciu linku, i tak właśnie chce się stać, ale chce, aby wyglądał jak zwykły <a>link do tagu.

Niektórzy programiści używają href='#' tego samego celu, ale powoduje to, że przeglądarka przeskakuje na górę strony, co może nie być pożądane. I nie mógł po prostu zostawić href pustego, ponieważ href=''jest linkiem do bieżącej strony (tzn. Powoduje odświeżenie strony).

Istnieje wiele sposobów na obejście tych rzeczy. hrefJednym z nich jest użycie pustego fragmentu kodu JavaScript i chociaż nie jest to najlepsze rozwiązanie, działa.

Spudley
źródło
16
Z ciekawości, czy jest na to lepszy sposób?
Rahman Kalfane
28
lepiej było to zrobić, jeśli zadziała funkcja zdarzenia return false;lub event.preventDefault()wtedy hrefakcja nigdy nie zostanie wywołana, więc możesz umieścić tam coś bardziej sensownego.
Spudley,
6
<a>Bez hreflub namenie jest nieważna; można to łatwo sprawdzić za pomocą walidatora.
Jukka K. Korpela,
2
Fragment (sekcja #) nigdy nie powinien być nawet wysyłany na serwer sieciowy zgodnie ze specyfikacją, więc jest szansa, że ​​Twoja przeglądarka robi tam coś złego.
Joshua Walsh
2
Tak, co powiedział @YoshieMaster. Jeśli adres URL zawiera # fragment , który nigdy nie jest wysyłany do serwera WWW (a zatem do zapory); jest używany tylko wewnętrznie przez przeglądarkę. W takim przypadku kliknięcie linku oznaczonego <a href="#">... </a>nie spowoduje wysłania przez przeglądarkę żądań HTTP w dowolnym miejscu; wystarczy przewinąć do góry strony.
Mark Reed,
38

w zasadzie zamiast używać linku do przenoszenia stron (lub kotwic), użycie tej metody uruchamia funkcje javascript

<script>
function doSomething() {
  alert("hello")
}
</script>
<a href="javascript:doSomething();">click me</a>

kliknięcie linku spowoduje uruchomienie alertu.

Eonasdan
źródło
31

Istnieje kilka mechanizmów pozwalających ominąć link prowadzący do celu. Pytanie z tego pytania nie jest zbyt intuicyjne.

Opcja odkurzacz jest użycie href="#no"gdzie #nojest niezdefiniowane kotwicy w dokumencie.

Możesz użyć bardziej semantycznej nazwy, takiej jak #disable lub #action, aby zwiększyć czytelność.

Korzyści z tego podejścia:

  • Unika efektu „przejścia na górę” pustego href = "#"
  • Unika używania javascript

Wady:

  • Musisz upewnić się, że nazwa kotwicy nie jest używana w dokumencie.

Ponieważ <a>element nie działa jako łącze, najlepszą opcją w tych przypadkach nie jest użycie <a>elementu, ale a <div>i zapewnienie pożądanego stylu podobnego do łącza.

Pau Giner
źródło
13
Lubię też niezdefiniowaną kotwicę. Jednak kolejną wadą jest to, że dodaje kotwicę do historii przeglądarki, więc wybieram użycie pustej metody JS w OP.
John Reid,
10
<a href="javascript:alert('Hello');"></a>

jest po prostu skrótem dla:

<a href="" onclick="alert('Hello'); return false;"></a>
Bjornd
źródło
3
W pewnym sensie, ale nie jest to prawdziwe porównanie „jak za jak”. Z tego powodu niektórzy wpadają w pułapkę używania go w pierwszej kolejności.
Lankymart
9

Jest to sposób na zrobienie z linku absolutnie nic po kliknięciu (chyba że powiązane są z nim zdarzenia JavaScript).

Jest to sposób na uruchomienie Javascript zamiast klikania linku:

<a href="Javascript: doStuff();">link</a>

Gdy faktycznie nie ma javascript do uruchomienia (jak w twoim przykładzie), nic nie robi.

Daan Wilmer
źródło
O, rozumiem. Skutecznie wyłącza link.
John Livermore,
9

Zobacz to:

<a href="Http://WWW.stackoverflow.com">Link to the website opened in different tab</a>
<a href="#MyDive">Link to the div in the page(look at the chaneged url)</a>
<a href="javascript:;">Nothing happens if there is no javaScript to render</a>
bk
źródło
4
<a href="javascript:void(0);"></a>

javascript: informuje przeglądarkę, aby napisała kod javascript

Gowri
źródło
3

Stary wątek, ale pomyślałem, że po prostu dodam, że powodem, dla którego programiści używają tej konstrukcji, nie jest tworzenie martwego łącza, ale ponieważ adresy URL javascript z jakiegoś powodu nie przekazują poprawnie odniesień do aktywnego elementu HTML.

np. handler_function(this.id)działa jako onClickURL javascript, ale nie jako.

Jest to więc wybór między pisaniem kodu zgodnego ze standardami pedantycznymi, który wymaga ręcznej regulacji połączenia dla każdego hiperłącza, lub nieco niestandardowym kodem, który można zapisać raz i używać wszędzie.


źródło
2

Więc jest używany do pisania kodów js wewnątrz hrefzamiast detektorów zdarzeń, takich jak onclickunikanie #linków i unikanie linków, hrefaby aznaczniki były poprawne dla html.

Miałem badanie, jak używać javascript:wewnątrz hrefatrybutu.

<a href="
     javascript:
        a = 4;
        console.log(a++); 
        a += 2; 
        console.log(a++); 
        if(a < 6){ 
            console.log('a is lower than 6');
        } 
        else 
            console.log('a is greater than 6');
        function log(s){
            console.log(s);
        }
        log('function inplimentation working too');

">Click here</a>

Za pomocą tego kodu możesz nawet pisać tam kody js zamiast wywoływać tylko funkcje.


Testowane w wersji chromowanej 68.0.3440.106 (oficjalna wersja) (64-bit)

Testowane w Firefox Quantom 61.0.1 (64-bit)

Amir Fo
źródło
-4

Najlepszym sposobem na prawidłowe renderowanie linku jest użycie css w następujący sposób:

a {cursor: pointer !important}

Należy unikać przestrzegania niepotrzebnych rzeczy, takich jak wspomniane w wątku.

Imran Nazir
źródło