Dlaczego źle jest używać linków z javascript:"protocol"?

W rzeczywistości obie metody są uważane za przestarzałe. Programiści są zamiast tego zachęcani do oddzielenia całego JavaScript w zewnętrznym pliku JS, aby oddzielić logikę i Kod od oryginalnego znacznika

• http://www.alistapart.com/articles/behavioralseparation
• http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

Powodem tego jest to, że tworzy kod, który jest łatwiejszy w utrzymaniu i debugowaniu, a także promuje standardy sieciowe i dostępność. Pomyśl o tym w ten sposób: patrząc na twój przykład, co by było, gdybyś miał setki takich linków na stronie i musiał zmienić zachowanie alert dla innej funkcji przy użyciu zewnętrznych odniesień JS, musiałbyś zmienić tylko jedno powiązanie zdarzeń w jednym pliku JS, a nie kopiować i wklejać kilka kodu w kółko lub robić find-and-replace.

Kilka powodów:

1. Bad code practice:
   Znacznik HREF oznacza, że istnieje odnośnik do hiperłącza do innej lokalizacji. Używanie tego samego znacznika dla funkcji javascript, która nie zabiera użytkownika nigdzie, jest złą praktyką programistyczną.

2. Problemy SEO:
   Myślę, że crawlery internetowe używają tagu HREF do indeksowania całej strony internetowej i łączenia wszystkich połączonych części. Wprowadzając javascript, łamiemy tę funkcjonalność.

3. Dostępność przerw:
   Myślę, że niektóre czytniki ekranu nie będą w stanie wykonać javascript i mogą nie wiedzieć, jak radzić sobie z javascript, podczas gdy oczekują hiperłącza. Użytkownik będzie oczekiwać, aby zobaczyć link w pasku stanu przeglądarki po najechaniu kursorem na link, podczas gdy będzie zobaczyć ciąg znaków jak: "javascript:", który może je mylić itp.

4. Jesteś jeszcze w latach 90-tych:
   Główną radą jest posiadanie javascript w oddzielnym pliku i nie mieszanie się z HTML strony, Jak to było zrobione w 1990 roku.

HTH.

Otwieram wiele linków w nowych zakładkach - tylko żeby zobaczyć javascript: void(). Więc denerwujesz mnie, jak i siebie (bo Google zobaczy to samo).

Innym powodem (również wspomnianym przez innych) jest to, że różne języki powinny być rozdzielone na różne dokumenty. Dlaczego? Cóż,

• języki mieszane nie są dobrze obsługiwane przez większość IDE i walidatorów. Osadzanie CSS i JS na stronach HTML (lub cokolwiek innego o to chodzi) praktycznie niszczy możliwości mieć wbudowany język sprawdzony pod kątem poprawności statycznie. Czasami również język osadzający. (Dokument PHP lub ASP nie jest poprawnym HTML.) Nie chcesz składni błędy lub niespójności, aby się pojawić tylko w czasie wykonywania.
• innym powodem jest czystsza separacja pomiędzy rodzaje rzeczy, których potrzebujesz określ: HTML dla treści, CSS dla układ, js Zwykle dla większej liczby układów i wygląd. To nie Mapa jeden do jednego: zazwyczaj chcesz zastosować layout do całych kategorii z elementów treści (stąd CSS) oraz wygląd i styl (stąd jQuery). Mogą być zmieniane w różnych razy, że elementy treści są zmieniane (w rzeczywistości treści są często generowane w locie) i przez różni ludzie. Więc sensowne jest trzymanie ich w osobne dokumenty.

Krótka odpowiedź: Inline Javascript jest zły z powodów, że inline CSS jest zły.

Używanie protokołu javascript: wpływa na dostępność, a także szkodzi temu, jak przyjazna jest Twoja strona SEO.

Zwróć uwagę, że HTML oznacza Hypter Text something something... Hyper Text oznacza tekst z linkami i odniesieniami w nim, do czego służy element kotwicy <a>.

Kiedy używasz javascript: 'protocol', nadużywasz elementu kotwicy. Ponieważ nadużywasz elementu <a>, rzeczy takie jak Bot Google i Czytnik ekranu Jaws będą miały problemy z "zrozumieniem" Twoja strona, ponieważ nie zależy im zbytnio na Twoim JS, ale bardzo zależy im na Hyper Text ML, zwracając szczególną uwagę na anchor hrefs.

Wpływa to również na użyteczność strony, gdy użytkownik, który nie ma włączonej obsługi JavaScript, odwiedza Twoją stronę; niszczysz oczekiwaną funkcjonalność i zachowanie linków dla tych użytkowników. Będzie wyglądał jak link, ale nie będzie działał jak link, ponieważ używa protokołu javascript.

Można by pomyśleć " ale ile osób ma JavaScript niepełnosprawni w dzisiejszych czasach?"ale lubię sformułować ten pomysł bardziej na wzór" ilu potencjalnych klientów jestem skłonny odrzucić tylko z powodu pola wyboru w ustawieniach przeglądarki?"

Sprowadza się to do tego, jak href jest atrybutem HTML i jako taki należy do informacji Twojej witryny, a nie jej zachowania. JavaScript definiuje zachowanie, ale nigdy nie chcesz, aby ingerowało w dane / informacje. Uosobieniem tego pomysłu byłby zewnętrzny plik JavaScript; nie używając onclick jako atrybut, ale zamiast tego jako Obsługa zdarzeń w pliku JavaScript.

Najgorszym problemem jest prawdopodobnie to, że łamie oczekiwaną funkcjonalność.
Na przykład, jak zauważyli inni, otwórz w nowym oknie / tab = dead link = zirytowani / zdezorientowani użytkownicy.

Zawsze staram się użyć onclick zamiast tego, i dodać coś do URL-hash strony, aby wskazać żądaną funkcję do uruchomienia i dodać sprawdzenie w pageload, aby sprawdzić hash i uruchomić funkcję.

W ten sposób uzyskasz takie samo zachowanie dla kliknięć, nowej karty / okna, a nawet zakładki / wysłane linki, a rzeczy nie robią się zwariowane, jeśli JS jest wyłączony.

Innymi słowy, coś takiego ( bardzo uproszczone):

Dla linku:

onclick = "doStuff()"

href = "#dostuff"

Dla strony:

onLoad = if(hash="dostuff") doStuff();

Ponadto, o ile mówimy o deprecjacji i semantyce, warto zwrócić uwagę, że '</a>' nie oznacza 'klikalny' - oznacza 'anchor' i implikuje link do innej strony. Warto więc użyć tego znacznika do przełączenia się na inny "widok" w aplikacji, ale nie do wykonywania obliczeń. Fakt, że nie masz adresu URL w atrybutie href, powinien być znakiem, że nie powinieneś używać znacznika kotwicy.

Możesz na przemian przypisać Zdarzenie kliknięcia działanie na prawie każdy element html - może <h1>, <img> lub <p> byłoby bardziej odpowiednie? W każdym razie, jak wspominali inni, Dodaj inny atrybut (być może 'id'), którego javascript może użyć jako 'hook' (dokument.getElementById), aby dostać się do elementu i przypisać onclick. W ten sposób można zachować zawartość (HTML) prezentacja (CSS) i interaktywność (JavaScript) oddzielone. I świat się nie skończy.

Myślę, że ma to związek z tym, co użytkownik widzi na pasku stanu. Zazwyczaj aplikacje powinny być budowane do przełączania awaryjnego w przypadku, gdy javascript nie jest włączony, jednak nie zawsze tak jest.

Z całym spamowaniem, które się dzieje, ludzie stają się coraz mądrzejsi, a gdy e-mail wygląda "phishy", coraz więcej osób patrzy na pasek stanu, aby zobaczyć, gdzie link faktycznie je zabierze.

Pamiętaj, aby dodać ' return false;' na końcu linku, aby strona nie przeskakiwała do top na użytkownika (chyba, że takie zachowanie szukasz).

Zazwyczaj mam stronę docelową o nazwie " EnableJavascript.htm "z dużym Komunikatem" Javascript musi być włączony, aby ta funkcja działała". A potem ustawiłem znaczniki kotwicy w ten sposób...

<a href="EnableJavascript.htm" onclick="funcName(); return false;">

W ten sposób Kotwica ma uzasadnione miejsce docelowe, które zostanie nadpisane przez funkcjonalność Javascript, gdy tylko będzie to możliwe. To ulegnie degradacji z wdziękiem. Chociaż od kilku dni zazwyczaj buduję strony internetowe z pełną funkcjonalnością zanim zdecyduję się na posypać trochę Javascript do mieszanki (co razem eliminuje potrzebę anchorów takich jak ten).

Używanie atrybutu onclick bezpośrednio w znacznikach to zupełnie inny temat, ale polecam dyskretne podejście z biblioteką taką jak jQuery.