Мастер-классы по Javascript, AJAX/COMET, jQuery Узнать больше...
Javascript.RU

Почему <a href="javascript:..."> - плохо

Сейчас общеизвестно, что не следует использовать псевдо-протокол javascript:, т.е писать:

<a href="javascript:openComment(123);">
  открыть комментарий
</a>

Почему это плохо, и какие аналоги следует использовать?

Псевдо-протокол javascript: давно устарел. Он поддерживается браузерами, но не описывается в веб-стандартах.

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

Ссылка через <a href="javascript:..."> не будет работать у пользователей без javascript.

Если это возможно, лучше сделать такой вариант:

<a href="/openComment.php?id=123" onclick="openComment(123); return false">
  открыть комментарий
</a>

Те посетители, у которых javascript отключен, пройдут по ссылке на /openComment.php?id=123 и таки увидят там что-то полезное.

Поисковики тоже проиндексируют /openCommend.php?id=123.

Если ничего подобного такой страничке сделать нельзя, например, ссылка должна запускать AJAX-запрос, то не надо писать:

<!-- плохо -->
<a href="#" onclick="ajax();return false">
  запусти меня
</a>

При нажатии на такую ссылку с отключенным javascript, человека кинет на начало страницы. Не есть гуд. Но какой-то href должен быть. Поэтому лучше сделать так:

<!-- хорошо -->
<a href="/nojs.html" target="_blank" onclick="ajax();return false">
  запусти меня
</a>

Страница /nojs.html может, например, содержать просьбу включить javascript.

Свойством onclick гораздо удобнее управлять из javascript. Оно задает обработчик события. Можно делать несколько обработчиков, назначить функцию а не строку как в href, и т.п.

А псевдо-протокол javascript: - не событие. Он выпадает из общей схемы и потому неудобен.

P.S Строго говоря, и onclick внутри HTML не следует указывать. Отдельно должны идти разметка и javascript-код. Но иногда onclick - это удобно, так почему же нет..

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

Так вот многие открывают эту ссылку в новой вкладке браузера и получают в адресе страницы "javascript:showPopup(27);", а не то, что они хотели увидеть.

Если все же хочется, чтобы по клику на ссылку у посетителя с отключенным javascript ничего не произошло:

<a href="javascript:void(0)">...</a>

Может ли это быть полезно в реальной жизни?

Сам не использую, но другого способа сделать ссылку нерабочей для посетителей без JS не знаю.


Автор: Андрей Параничев, дата: 9 августа, 2008 - 03:11
#permalink

А чем

<a href="javascript:void()">...</a>

принципиально отличается от

<a href="javascript:blablabla()">...</a>

для пользователя с отключенным JavaScript? В чем позитивное применение?


Автор: Илья Кантор, дата: 9 августа, 2008 - 11:12
#permalink
  1. javascript:void() - сразу понятен смысл кода, в отличие от javascript:blablabla()
  2. Можно бы короче, типа <a href="javascript:">, но например в Firefox такая ссылка открывает окно ошибок JS

Позитивное применение - в том, что такой href при отключенном js просто ничего не делает. И при этом не кидает кликнувшего на начало страницы как <a href="#">.


Автор: Андрей Параничев, дата: 12 августа, 2008 - 16:41
#permalink

А вот так если: "javascript://"?


Автор: PeaceCoder, дата: 22 декабря, 2009 - 20:57
#permalink

Лучше всего < a href='#__JSNotWork' onclick="" >asdfasdf< /a >
И ничего не произойдет никуда не кинет и сработает только при включенном JS


Автор: КИРИЛЛ (не зарегистрирован), дата: 9 ноября, 2008 - 17:31
#permalink

a href="#" - есть ложная ссылка, чтобы поставить "иллюминацию" на текст

Можно пользоваться и такими способами: print();

Нельзя пользоваться <'сжечь процессор'>


Автор: КИРИЛЛ (не зарегистрирован), дата: 9 ноября, 2008 - 17:33
#permalink

"script"print();"/script"


Автор: vflash, дата: 12 августа, 2008 - 19:19
#permalink

в отличии от #blabla
удобно тем что в строке статуса видно не http://...полный путь страницы...#blabla ,а короткая надпись javascript:blablabla
это одно из применений если ссылки js сам и создает

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

рано хороним


Автор: Гость (не зарегистрирован), дата: 25 ноября, 2009 - 08:45
#permalink

а мне вот нафиг не нужно чтоб кто то там.. ковырялсяразбирался/читал в моем коде! где и что лежит, и как все устроено, это мое дело и я сам знаю где что! Главное, работает.. вот и хорошо!


Автор: tiv (не зарегистрирован), дата: 18 августа, 2008 - 14:28
#permalink

правильно писать:
javascript:void(0)


Автор: Гость (не зарегистрирован), дата: 30 августа, 2008 - 13:34
#permalink

прочёл... нечего не понял... в чём отличия....

пойду ещё раз прочитаю....


Автор: Виктор (не зарегистрирован), дата: 1 сентября, 2008 - 01:30
#permalink

Объясните зеленому, если javascript отключен, то по ссылке нужно перейти на другую страницу, а если включен то должен запуститься "AJAX" запрос и подгрузиться новые данные.
Как лучше это реализовывать?


Автор: Rusly (не зарегистрирован), дата: 3 сентября, 2008 - 15:26
#permalink

Ты статью то прочитал? Там же есть пример -

В href помещаешь ссылку на страницу при выключенном javascript, а в onclick - функцию, вызывающую твой запрос.


Автор: andead (не зарегистрирован), дата: 13 сентября, 2008 - 14:10
#permalink

я иногда пишу пишу href="javascript:;"


Автор: rem_lex (не зарегистрирован), дата: 17 сентября, 2008 - 13:50
#permalink

href="javascript:;"
а теперь запусти сие чудо на ИЕ7


Автор: Гость (не зарегистрирован), дата: 8 апреля, 2009 - 00:36
#permalink

ну запустил. И?


Автор: macint0sh, дата: 21 мая, 2010 - 10:08
#permalink

ну я практически всегда пишу так, и работает везде, ну по крайней мере у меня во всех браузерах.


Автор: Jakpot (не зарегистрирован), дата: 23 сентября, 2008 - 08:19
#permalink

Понаделал анимированных кнопок с использованием <?a>, но теперь непонятно, как сделать из этих кнопок нормальные ссылки.


Автор: SelenIT, дата: 24 сентября, 2008 - 12:46
#permalink

Если я ничего не путаю, <a href="javascript:void(0)">...</a> в IE все равно вызывает артефакты, связанные с переходом в состояние "ожидание загрузки" - в частности, убивает gif-анимацию, динамические эффекты с картинками (ролловеры) и т.п. На Винграде была пара тем, где народ реально наступал на эти грабли. Так что я бы не советовал так делать нерабочие без JS ссылки, уж лучше, имхо, что-то вроде

<script>document.write('<a href="#" onclick="return!1">Ссылка</a>');</script>
<noscript><span>Заглушка</span></noscript>

Либо навешивать href-ы динамически по загрузке DOM-а.

А для примера осмысленного применения javascript:-протокола (помимо букмарклетов), я бы скорее привел это.


Автор: Lelouch (не зарегистрирован), дата: 20 октября, 2008 - 19:09
#permalink

Науверняка многим будет интересно узнать больше о Букмарклетах, я собрал ссылки наиболее содержательные по этой теме:

http://ru.wikipedia.org/wiki/Букмарклет
http://javascript.ru/unsorted/why_href_js_is_bad
http://www.xakep.ru//magazine/xa/112/042/1.asp
http://vkontakte.ajachtung.com


Автор: Гость (не зарегистрирован), дата: 24 октября, 2008 - 11:44
#permalink

спасибо помогло избавиться от #


Автор: Илья Кантор, дата: 24 октября, 2008 - 19:50
#permalink

На сайте появилась статья про букмарклеты.


Автор: Странник (не зарегистрирован), дата: 29 октября, 2008 - 18:33
#permalink

А если не писать вообще href="", а просто

<a onclick=""></a>

Автор: goldserg (не зарегистрирован), дата: 16 февраля, 2009 - 12:18
#permalink

Если не писать аттрибут href тогда
1) тег а будет не валидным
2) он не будет отображатсья как ссылка, а просто как тектсовый элемент и не будет изменен курсор


Автор: Гость (не зарегистрирован), дата: 7 августа, 2009 - 22:18
#permalink

Если прописать в css чтобы менялся курсор и цвет то будет


Автор: Гость (не зарегистрирован), дата: 12 ноября, 2009 - 16:09
#permalink

насколько я помню, в ие 6,7 hover работает только на ссылках, в которых обязательно должно быть href


Автор: Гость (не зарегистрирован), дата: 31 октября, 2008 - 16:48
#permalink

Я чаще использую javascript:void(0) , все остальные оналоги полное г,т.к. не будут работать под ие7, сафари и т.д.

Вот пример: dgweb.ru


Автор: Гость (не зарегистрирован), дата: 1 декабря, 2008 - 17:27
#permalink

Если вы не хотите, что бы без яваскрипта человек куда-то шёл, зачем использовать

<a href ..>

вообще? Используйте

<div class="href" onClick="...">

Если яваскрипт включен - при клике событие и на диве пройдёт, если нет - у нас не будет ссылки, а будет див, оформленный под ссылку. На мой взгляд, наиболее логичный вариант

предыдущий пост мой, тут исправленая версия


Автор: tenshi, дата: 24 февраля, 2010 - 20:50
#permalink

навигация клавиатурой

.ня


Автор: Гость (не зарегистрирован), дата: 17 мая, 2010 - 14:00
#permalink

- ссылка

- не ссылка!!!
Видите разницу? Нет? А поисковые системы видят. После таких вэб-мастеров для того чтобы сайт хоть как то в поисковых системах продвинуть переписывать приходится добрую половину.

Автор: demoriz (не зарегистрирован), дата: 17 мая, 2010 - 14:03
#permalink

<a href ..> - ссылка
<div class="href" onClick="..."> - не ссылка!!!
Видите разницу? Нет? А поисковые системы видят. После таких вэб-мастеров для того чтобы сайт хоть как то в поисковых системах продвинуть переписывать приходится добрую половину.

PS. сорри предыдущий мой пост некорректно получился.


Автор: Гость (не зарегистрирован), дата: 26 августа, 2010 - 20:18
#permalink

Если в ссылке нет урла, то поисковикам на эту ссылку насрать, они ее игнорируют, либо изъясняйтесь правильно, либо не пудрите людям мозг


Автор: RReverser (не зарегистрирован), дата: 3 января, 2009 - 18:36
#permalink

Но без этого протокола иногда обойтись довольно трудно. Как, например, мне из дельфы заставить TWebBrowser выполнить некий яваскрипт без Navigate('javascript:...')? Если знаете лучшие варианты, поделитесь, пожалуйста.


Автор: Гость (не зарегистрирован), дата: 3 января, 2009 - 21:41
#permalink

Есть вариант (правильный вариант) с методом execScript у HTMLDocument.
Вот почти по этой теме статья, только там одну функцию вызывает, но выполнять можно произвольный код: http://www.delphidabbler.com/articles?article=21


Автор: popov654 (не зарегистрирован), дата: 9 января, 2009 - 23:07
#permalink

To rem lex:
И чем же же плох href="javascript:;"? У меня IE7, всё нормально. Просто нерабочая ссылка. Может у Вас какие-то апдейты не установлены?


Автор: Гость (не зарегистрирован), дата: 21 декабря, 2009 - 02:21
#permalink
<a href="javascript:'Упс...';">Попробуем:)</a>

Попробуем:)
Понятно, зачем в последней инструкции нужен оператор void?

<a href="javascript:void 'Упс...';">А теперь гарантированно ничего</a>

А, поскольку псевдопротокол относится к объекту location, то и this будет ссылаться на window... Очень удобно, не так ли?)


Автор: Гость (не зарегистрирован), дата: 21 декабря, 2009 - 08:55
#permalink

this всегда ссылается на window, если не задан принудительно.


Автор: orko (не зарегистрирован), дата: 8 мая, 2009 - 21:11
#permalink


CLICK ME !

эта конструкция работает везде
а проверку на включение скрипта, надо ставить ранее ... и глобально


Автор: orko (не зарегистрирован), дата: 8 мая, 2009 - 21:12
#permalink
<a name="javascriptvoid"></a>
<a href="#javascriptvoid">CLICK ME !</a>

Автор: D.S.Denton (не зарегистрирован), дата: 14 мая, 2009 - 02:29
#permalink

угу, похоже что если необходимо использовать именно А, удобнее всего создавать дополнительно рядом якорь, пасибо за идею


Автор: Илья Кантор, дата: 14 мая, 2009 - 18:21
#permalink

Конструкция <a name="...."> устарела, используйте вместо name свойство id.


Автор: dba, дата: 6 октября, 2009 - 09:31
#permalink

Якоря никогда не устареют
Как и , ...


Автор: Ax (не зарегистрирован), дата: 25 мая, 2009 - 08:39
#permalink

А что Вам мешает использовать такой вариант?

var act = function (x){
 // обработчик события на AJAX
}

bind(a, act); // биндим все теги "a" или только нужные по какому-либо из их
// параметров, например по id или даже innerHTML 
//в случае если это, к примеру "CarJaguar"
<a href="/?id=2&foo=bar&zoo=1">Сделать что-либо</a>

а в бекенде сделать такой же обработчик:

if(XHR){
 case...... // И так далее обрабатываем XHR событие
}else{
 if($_GET['id'] == 2)
  // выполняем код для обычного запроса...
}

Мне кажется, это наиболее правильный из все вариантов.
При таком использовании достигается максимум разделения и максимум валидности.
1) HTML содержит только HTML
2) JS линкуется отдельно в и возможно в или что-либо на ваше усмотрение, что будет его запускать. В результате мы получаем практически отсутствующий inline-js.
3) Таким же образом делается и CSS.
4) Бекенд часть с радостью сделает ряд функций, за Вас позволяя не использовать подобные "загрязняющие" конструкции в Вашем Html:
document.write........ etc

Мне кажется, подобный подход наиболее облегчает жизнь при web-разработке.


Автор: Ax (не зарегистрирован), дата: 25 мая, 2009 - 08:44
#permalink

...
2) JS линкуется отдельно в "<_head_>" и возможно в или ....
...
4) ...

<script>document.write........ etc</script><noscript><a href.... </noscript>

Стрип тег...


Автор: Ax (не зарегистрирован), дата: 25 мая, 2009 - 08:46
#permalink

2) JS линкуется отдельно в "<_head_>" и возможно в "<_ body onload='run()' _>" или ....

эх...


Автор: Гость (не зарегистрирован), дата: 2 июня, 2009 - 08:26
#permalink

Можно использовать

<a href="javascript://">Click me</a>
<a href="#">Click me</a>
<a href="javascript:void(0)">Click me</a>

чего мучаются ...


Автор: Falcon (не зарегистрирован), дата: 9 октября, 2009 - 11:13
#permalink

Дак я что то не понял..
если javascript: это плохо..
почему тогда хорошо использовать? javascript:void(0) ?
и почему он работает при отключённом js ?


Автор: Константин (не зарегистрирован), дата: 24 октября, 2009 - 18:52
#permalink

По-моему самый лучший варинат.
a href="/reg.php" onclick="Reg(); return false;"Зарегистрироваться/a


Автор: Гость (не зарегистрирован), дата: 11 декабря, 2009 - 17:56
#permalink

ссылка

<a href="javascript:{}">ссылка</a>

и все


Автор: Гость (не зарегистрирован), дата: 13 февраля, 2010 - 12:04
#permalink

Что всё таки сие значит в теории? Код взят с nigma.ru ... Здесь упоминали о такой форме - с слэшами но так и не обьяснили различия между вариантами.

a href="javascript://" onclick="reset_all(0); return false;">сбросить


Автор: cooli0, дата: 18 февраля, 2010 - 19:24
#permalink

Не используйте onclick - в больших проектах это может привести к каше. Существуют евенты. Они были созданы специально для этих целей. Используйте void(0) и забейте на пользователей, у которых отключен JS. Поверьте, если сайт ваш интересный, вы ничего не потеряете.


Автор: Ntropy, дата: 19 февраля, 2010 - 16:35
#permalink

Илья, думаю что стоит добавить об этом в статью

Автор: Илья Кантор, дата: 7 августа, 2008 - 22:02
Угу, еще одна причина не писать javascript-код в href..


Автор: subzey, дата: 24 февраля, 2010 - 14:15
#permalink

Есть еще один (вроде, еще не описанный выше) минус ссылок с протоколом javascript: — на некоторых сайтах нет никакого визульного различия между ссылками обычными и «яваскриптовыми» (хотя уже и принято последние подчеркивать пунктирно). И иногда хочется, чтобы не потерять данные формы, открыть ссылку в новом окне. Новое окно открывается на ура, но с урлом типа «javascript:doSomethingGood();void(0)», и, естественно, ничего полезного не происходит, потому что в новом окне-то эта функция не определена.


Автор: Гость (не зарегистрирован), дата: 27 марта, 2010 - 11:17
#permalink

Какой смысле использовать ссылку не используя при этом ее атрибут href. Если нужно какое-то действие скриптовое выполнить, то намного логичнее его привязать к тегу button или span, оформив их при помощи стилей подчеркиванием или чем-то типа этого.
На самом деле использование javascsript в href имеет еще один отрицательный момент (я не заметил, чтобы его указали здесь). Очень часто используют скрипт в ссылке, когда по клику нужно открыть картинку или описание продукта. Так вот многие открывают эту ссылку в новой вкладке браузера и получают в адресе страницы "javascript:showPopup(27);", а не то, что они хотели увидеть.
Проверка на работу javascript - это вообще весьма странная вещь. На большинстве сайтов, например, такие пользователи никогда не смогут попасть в подменю. Осуществлять иную навигацию. В общем это сродни проверки на "отключение монитора".

А про flash. Там вообще fscommand есть и целый интерфейс для работы со страницей.


Автор: tolikman (не зарегистрирован), дата: 31 июля, 2010 - 01:20
#permalink

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
12 + 4 =
Введите результат. Например, для 1+3, введите 4.
 
Новости

Открылась регистрация на мастер-классы по профессиональному Javascript, AJAX/COMET, jQuery в городах:

  • Ярославль (24-25 сентября)
  • Новосибирск (3-4 октября)
  • Казань (9-10 октября)
  • Минск (16-17 октября)
  • Днепропетровск (23-24 октября)
  • Одесса (30-31 октября)
  • Самара (13-14 ноября)

Более подробно - на странице мастер-классов.

Если вас интересует другой город - посмотрите здесь, выбрав "Другие города".

Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Статьи и мероприятия

Будьте в курсе наших последних новостей!

Последние обсуждения на форуме
Forum
Последние комментарии