Почему плохой практикой является использование ссылок с помощью javascript: «protocol»?

Question

В 1990-х годах была мода помещать код Javascript непосредственно в <a> атрибуты href, например:

<a href="javascript:alert('Hello world!')">Press me!</a>

И вдруг я остановился, чтобы увидеть это. Все они были заменены такими вещами, как:

<a href="#" onclick="alert('Hello world!')">Press me!</a>

Для ссылки, единственной целью которой является запуск кода Javascript и не имеющей реальной цели href, почему рекомендуется использовать свойство onclick вместо свойства href?

Answer 1

Контекст выполнения другой, чтобы увидеть это, попробуйте следующие ссылки:

<a href="javascript:alert(this.tagName)">Press me!</a> <!-- result: undefined -->
<a href="#" onclick="alert(this.tagName)">Press me!</a> <!-- result: A -->

javascript: выполняется в глобальном контексте, а не как метод элемента, который обычно требуется вам. В большинстве случаев вы делаете что-то с элементом, с которым действовали, или в связи с ним, лучше выполнить это в этом контексте.

Кроме того, это намного чище, хотя я бы вообще не использовал встроенный скрипт. Проверьте любые рамки для обработки этих вещей в более чистом виде. Пример в jQuery:

$('a').click(function() { alert(this.tagName); });

Answer 2

На самом деле оба метода считаются устаревшими. Вместо этого разработчикам рекомендуется отделить весь JavaScript во внешнем файле JS, чтобы отделить логику и код от подлинной разметки

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

Причина этого в том, что он создает код, который легче поддерживать и отлаживать, а также продвигает веб-стандарты и доступность. Подумайте об этом следующим образом: если на вашем примере есть сотни подобных ссылок на странице и вам нужно изменить поведение alert для какой-либо другой функции с использованием внешних ссылок JS, вам нужно всего лишь изменить привязка одного события в одном файле JS, а не копирование и вставка набора кода снова и снова или выполнение поиска и замены.

Answer 3

Пара причин:

1. Практика неправильного кода:
   Тег HREF указывает на наличие гиперссылки на другое местоположение.Использование того же тега для функции JavaScript, которая фактически никуда не ведет пользователя, является плохой практикой программирования.

2. Проблемы с SEO:
   Я думаю, что веб-сканеры используют тег HREF для сканирования по всему веб-сайту и связывания всех связанных частей.Помещая javascript, мы нарушаем эту функциональность.

3. Нарушение доступности:
   Я думаю, что некоторые программы чтения с экрана не смогут выполнить JavaScript и могут не знать, как обращаться с JavaScript, пока они ожидают гиперссылку.Пользователь будет ожидать увидеть ссылку в строке состояния браузера при наведении на нее ссылки, в то время как он увидит строку типа: «javascript:», которая может их запутать и т. Д.в 1990-х годах:
   Основной совет - размещать свой javascript в отдельном файле и не смешивать его с HTML-кодом страницы, как это было в 1990-х годах.

HTH.

Answer 4

Я открываю множество ссылок на новых вкладках - только чтобы увидеть javascript: void (). Таким образом, вы раздражаете меня, а также себя (потому что Google увидит то же самое).

Другая причина (также упоминаемая другими) заключается в том, что разные языки должны быть разделены на разные документы. Зачем? Ну,

• Смешанные языки не очень хорошо поддерживаются большинством IDE и валидаторов. Встраивание CSS и JS в HTML-страницы (или что-нибудь еще в этом отношении) в значительной степени разрушает возможности проверить встроенный язык на правильность статически. Иногда и язык встраивания. (Документ PHP или ASP не является допустимым HTML.) Вы не хотите синтаксис ошибки или несоответствия, чтобы показать только во время выполнения.
• Другая причина заключается в более четком разделении виды вещей, которые вам нужны указать: HTML для контента, CSS для макет, JS обычно для более макета и выглядеть и чувствовать. Это не карта один в один: вы обычно хотите подать заявку макет для целых категорий из элементы контента (отсюда и CSS) и внешний вид (следовательно, jQuery). Они могут быть изменены на разных раз, что элементы содержимого изменены (на самом деле контент часто генерируется на лету) и различные люди. Так что имеет смысл держать их в отдельные документы.

Answer 5

Использование протокола javascript: влияет на доступность, а также ухудшает SEO-ориентированность вашей страницы.

Обратите внимание, что HTML означает что-то вроде Hypter Text ... Hyper Text обозначает текст со ссылками и ссылками вэто то, для чего используется элемент привязки <a>.

Когда вы используете javascript: «протокол», вы неправильно используете элемент привязки.Так как вы неправильно используете элемент <a>, такие вещи, как Google Bot и программа чтения с Jaws Screen, будут иметь проблемы с «пониманием» вашей страницы, так как они не очень заботятся о вашем JS, но заботятся о Hyper Text ML, принимаяспециальное примечание привязки hrefs.

Это также влияет на удобство использования вашей страницы, когда пользователь, у которого не включен JavaScript, посещает вашу страницу;вы нарушаете ожидаемую функциональность и поведение ссылок для этих пользователей.Он будет выглядеть как ссылка, но он не будет действовать как ссылка, потому что он использует протокол javascript.

Вы можете подумать, «но у скольких людей в настоящее время отключен JavaScript?»но мне нравится формулировать эту идею более примерно так: «Сколько потенциальных клиентов я хочу отвергнуть только из-за флажка в настройках браузера?»

Это сводится к тому, как href являетсяАтрибут HTML, и как таковой, он принадлежит информации вашего сайта, а не его поведению.JavaScript определяет поведение, но вы никогда не хотите, чтобы он мешал данным / информации.Воплощением этой идеи будет внешний файл JavaScript;не используется onclick в качестве атрибута, а вместо этого в качестве обработчика событий в вашем файле JavaScript.

Answer 6

Краткий ответ: встроенный JavaScript плох по тем причинам, что встроенный CSS плох.

Answer 7

Худшая проблема, вероятно, в том, что она нарушает ожидаемую функциональность.
Например, как отмечали другие, откройте в новом окне / tab = мертвая ссылка = раздраженные / сбитые с толку пользователи.

Я всегда стараюсь использовать onclick вместо этого, и добавить что-то в URL-хэш страницы, чтобы указать желаемую функцию для запуска и добавить проверку при загрузке страницы в проверьте хеш и активируйте функцию.

Таким образом, вы получаете такое же поведение для кликов, новой вкладки / окна и даже закладок / отправленных ссылок, и вещи не выходят из строя, если JS выключен.

Другими словами, что-то вроде этого ( очень упрощенно ):

Для ссылки:

onclick = "doStuff()"

href = "#dostuff"

Для страницы:

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

Answer 8

У меня обычно есть целевая страница с именем «EnableJavascript.htm», на которой написано большое сообщение: «Для работы этой функции должен быть включен Javascript». И тогда я настраиваю свои теги привязки как это ...

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

Таким образом, якорь имеет законное назначение, которое будет перезаписываться вашими функциями Javascript, когда это возможно. Это будет ухудшаться изящно. Хотя сейчас я обычно создаю веб-сайты с функциональностью complete , прежде чем решаю добавить немного Javascript в смесь (что в совокупности устраняет необходимость в таких якорях).

Использование атрибута onclick непосредственно в разметке - это совсем другая тема, но я бы рекомендовал ненавязчивый подход с такой библиотекой, как jQuery.

Answer 9

Кроме того, поскольку мы говорим об устаревании и семантике, вероятно, стоит отметить, что «</a>» не означает «кликабельный» - это означает «якорь» и подразумевает ссылку на другую страницу.Поэтому имеет смысл использовать этот тег для переключения на другое «представление» в вашем приложении, но не для выполнения вычислений.Тот факт, что у вас нет URL-адреса в атрибуте href, должен указывать на то, что вам не следует использовать тег привязки.

Вы можете, альтернативно, назначить действие события click почти для любого элемента HTML- может быть, <h1>, <img> или <p> будет более подходящим?В любом случае, как уже упоминали другие люди, добавьте еще один атрибут (возможно, «id»), который javascript может использовать как «hook» (document.getElementById), чтобы получить элемент и назначить щелчок мышью.Таким образом вы можете разделить представление контента (HTML) (CSS) и интерактивность (JavaScript).И мир не кончится.

Answer 10

Я думаю, что это связано с тем, что пользователь видит в строке состояния. Обычно приложения должны создаваться для восстановления после отказа в случае, если JavaScript не включен, однако это не всегда так.

Со всем происходящим спамом люди становятся умнее, а когда электронное письмо выглядит «фишным», все больше и больше людей смотрят на строку состояния, чтобы увидеть, куда на самом деле их приведет ссылка.

Не забудьте добавить 'return false;' до конца вашей ссылки, чтобы страница не переходила наверх пользователя (если это не то поведение, которое вы ищете).