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 ничего не произошло:

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

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

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


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

А чем

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

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

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

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


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

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


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

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


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

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


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

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

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

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


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

"script"print();"/script"


Автор: Gvozd, дата: 11 августа, 2008 - 18:00
#permalink

>>>
Псевдо-протокол javascript: давно устарел. Он поддерживается браузерами, но не описывается в веб-стандартах. Тупиковая ветвь развития.
<<<
в каком же месте она тупиковая, если на ней основывается такая удобная(вместе с тем и опасная) вещь, как JABFrame.
кто, не в курсе, читаем

http://www.xakep.ru//magazine/xa/112/042/1.asp


Автор: Илья Кантор, дата: 11 августа, 2008 - 19:46
#permalink

Протокол javascript: - такой же тупиковый, как многочисленные IE5.5, IE6-хаки и другие устаревшие и не вошедшие в веб-стандарты "фичи". Ну нет его в стандартах.. Deprecated..Что еще сказать...

P.S В твоем комментарии не работала ссылка, я это поправил.
Еще вот - по JABFrame: http://jabframe.ajachtung.com/


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

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

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

рано хороним


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

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


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

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


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

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

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


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

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


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

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

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


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

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


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

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


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

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


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

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


Автор: SelenIT, дата: 24 сентября, 2008 - 11: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 - 18: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 - 10:44
#permalink

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


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

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


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

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

<a onclick=""></a>

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

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


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

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


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

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


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

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

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


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

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

<a href ..>

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

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

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

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


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

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

.ня


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

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


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

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


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

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


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

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

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

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


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

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


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


CLICK ME !

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


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

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

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


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

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


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

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


Автор: Ax (не зарегистрирован), дата: 25 мая, 2009 - 07: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 - 07:44
#permalink

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

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

Стрип тег...


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

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

эх...


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

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

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

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


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

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


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

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


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

ссылка

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

и все


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

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

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


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

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


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

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

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


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

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


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

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи.
    Для остальных вопросов и обсуждений есть форум.
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
Антиспам
5 + 7 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

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

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

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

Ответьте, пожалуйста..
О чем бы вы хотели услышать на конференции по javascript?

На какие темы послушать доклады? Конференция состоится в середине мая.


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