Почему <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 не знаю.
|
А чем
принципиально отличается от
для пользователя с отключенным JavaScript? В чем позитивное применение?
javascript:void()- сразу понятен смысл кода, в отличие отjavascript:blablabla()<a href="javascript:">, но например в Firefox такая ссылка открывает окно ошибок JSПозитивное применение - в том, что такой
hrefпри отключенном js просто ничего не делает. И при этом не кидает кликнувшего на начало страницы как<a href="#">.А вот так если: "javascript://"?
Лучше всего < a href='#__JSNotWork' onclick="" >asdfasdf< /a >
И ничего не произойдет никуда не кинет и сработает только при включенном JS
a href="#" - есть ложная ссылка, чтобы поставить "иллюминацию" на текст
Можно пользоваться и такими способами: print();
Нельзя пользоваться <'сжечь процессор'>
"script"print();"/script"
в отличии от #blabla
удобно тем что в строке статуса видно не http://...полный путь страницы...#blabla ,а короткая надпись javascript:blablabla
это одно из применений если ссылки js сам и создает
еше удобен в чтении кода, хотя и получается код мение поворотлив. там где используется подобный onclick оказалось проше разобраться в коде чем в том где события вешаются в глубине кода, что и усложняет изучение.
рано хороним
а мне вот нафиг не нужно чтоб кто то там..
ковырялсяразбирался/читал в моем коде! где и что лежит, и как все устроено, это мое дело и я сам знаю где что! Главное, работает.. вот и хорошо!идиот. тогда и шаблоны проектирования не нужны. и спагетти код тогда по вашему рулит.
правильно писать:
javascript:void(0)
прочёл... нечего не понял... в чём отличия....
пойду ещё раз прочитаю....
Объясните зеленому, если javascript отключен, то по ссылке нужно перейти на другую страницу, а если включен то должен запуститься "AJAX" запрос и подгрузиться новые данные.
Как лучше это реализовывать?
Ты статью то прочитал? Там же есть пример -
В href помещаешь ссылку на страницу при выключенном javascript, а в onclick - функцию, вызывающую твой запрос.
я иногда пишу пишу href="javascript:;"
href="javascript:;"
а теперь запусти сие чудо на ИЕ7
ну запустил. И?
строка, состоящая из одной ";" - это пустой оператор.
http://habrahabr.ru/blogs/javascript/111563/
ну я практически всегда пишу так, и работает везде, ну по крайней мере у меня во всех браузерах.
Если я ничего не путаю, <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:-протокола (помимо букмарклетов), я бы скорее привел это.
Науверняка многим будет интересно узнать больше о Букмарклетах, я собрал ссылки наиболее содержательные по этой теме:
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
спасибо помогло избавиться от #
На сайте появилась статья про букмарклеты.
А если не писать вообще href="", а просто
Если не писать аттрибут href тогда
1) тег а будет не валидным
2) он не будет отображатсья как ссылка, а просто как тектсовый элемент и не будет изменен курсор
Если прописать в css чтобы менялся курсор и цвет то будет
насколько я помню, в ие 6,7 hover работает только на ссылках, в которых обязательно должно быть href
Если вы не хотите, что бы без яваскрипта человек куда-то шёл, зачем использовать
вообще? Используйте
Если яваскрипт включен - при клике событие и на диве пройдёт, если нет - у нас не будет ссылки, а будет див, оформленный под ссылку. На мой взгляд, наиболее логичный вариант
предыдущий пост мой, тут исправленая версия
навигация клавиатурой
.ня
- ссылка
Видите разницу? Нет? А поисковые системы видят. После таких вэб-мастеров для того чтобы сайт хоть как то в поисковых системах продвинуть переписывать приходится добрую половину.
<a href ..> - ссылка
<div class="href" onClick="..."> - не ссылка!!!
Видите разницу? Нет? А поисковые системы видят. После таких вэб-мастеров для того чтобы сайт хоть как то в поисковых системах продвинуть переписывать приходится добрую половину.
PS. сорри предыдущий мой пост некорректно получился.
Если в ссылке нет урла, то поисковикам на эту ссылку насрать, они ее игнорируют, либо изъясняйтесь правильно, либо не пудрите людям мозг
полностью согласен, тут человек хоронить псевдо протокол собрался, так как не понимает, что кому то он нужен. а они такой трёп по такой пустяковой проблеме развели. Будто бы, кого то из них хоть раз кто то из за этого поддр....
А вообще нет ссылки, нет проблемы.
Нет сайта - нет проблемы, имхо)
Но без этого протокола иногда обойтись довольно трудно. Как, например, мне из дельфы заставить TWebBrowser выполнить некий яваскрипт без Navigate('javascript:...')? Если знаете лучшие варианты, поделитесь, пожалуйста.
Есть вариант (правильный вариант) с методом execScript у HTMLDocument.
Вот почти по этой теме статья, только там одну функцию вызывает, но выполнять можно произвольный код: http://www.delphidabbler.com/articles?article=21
Точно-точно! Особенно если надо, чтобы на странице что-то происходило при событиях, происходящих в программе, а не на странице! Рано хоронят эту технологию… Впрочем, как и многие другие!
To rem lex:
И чем же же плох href="javascript:;"? У меня IE7, всё нормально. Просто нерабочая ссылка. Может у Вас какие-то апдейты не установлены?
Попробуем:)
Понятно, зачем в последней инструкции нужен оператор void?
А, поскольку псевдопротокол относится к объекту location, то и this будет ссылаться на window... Очень удобно, не так ли?
)
this всегда ссылается на window, если не задан принудительно.
CLICK ME !
эта конструкция работает везде
а проверку на включение скрипта, надо ставить ранее ... и глобально
угу, похоже что если необходимо использовать именно А, удобнее всего создавать дополнительно рядом якорь, пасибо за идею
Конструкция <a name="...."> устарела, используйте вместо
nameсвойствоid.Якоря никогда не устареют
Как и , ...
У кого усторела, а у кого нормально и стабильно работает.
Автору запретить использовать псевдо протокол и наме, всем остальным халява)
А что Вам мешает использовать такой вариант?
var act = function (x){ // обработчик события на AJAX } bind(a, act); // биндим все теги "a" или только нужные по какому-либо из их // параметров, например по id или даже innerHTML //в случае если это, к примеру "CarJaguar"а в бекенде сделать такой же обработчик:
if(XHR){ case...... // И так далее обрабатываем XHR событие }else{ if($_GET['id'] == 2) // выполняем код для обычного запроса... }Мне кажется, это наиболее правильный из все вариантов.
При таком использовании достигается максимум разделения и максимум валидности.
1) HTML содержит только HTML
2) JS линкуется отдельно в и возможно в или что-либо на ваше усмотрение, что будет его запускать. В результате мы получаем практически отсутствующий inline-js.
3) Таким же образом делается и CSS.
4) Бекенд часть с радостью сделает ряд функций, за Вас позволяя не использовать подобные "загрязняющие" конструкции в Вашем Html:
document.write........ etc
Мне кажется, подобный подход наиболее облегчает жизнь при web-разработке.
...
2) JS линкуется отдельно в "<_head_>" и возможно в или ....
...
4) ...
Стрип тег...
2) JS линкуется отдельно в "<_head_>" и возможно в "<_ body onload='run()' _>" или ....
эх...
Можно использовать
чего мучаются ...
Дак я что то не понял..
если javascript: это плохо..
почему тогда хорошо использовать? javascript:void(0) ?
и почему он работает при отключённом js ?
По-моему самый лучший варинат.
a href="/reg.php" onclick="Reg(); return false;"Зарегистрироваться/a
ссылка
<a href="javascript:{}">ссылка</a>и все
Что всё таки сие значит в теории? Код взят с nigma.ru ... Здесь упоминали о такой форме - с слэшами но так и не обьяснили различия между вариантами.
a href="javascript://" onclick="reset_all(0); return false;">сбросить
Не используйте onclick - в больших проектах это может привести к каше. Существуют евенты. Они были созданы специально для этих целей. Используйте void(0) и забейте на пользователей, у которых отключен JS. Поверьте, если сайт ваш интересный, вы ничего не потеряете.
Илья, думаю что стоит добавить об этом в статью
Автор: Илья Кантор, дата: 7 августа, 2008 - 22:02
Угу, еще одна причина не писать javascript-код в href..
Есть еще один (вроде, еще не описанный выше) минус ссылок с протоколом
javascript:— на некоторых сайтах нет никакого визульного различия между ссылками обычными и «яваскриптовыми» (хотя уже и принято последние подчеркивать пунктирно). И иногда хочется, чтобы не потерять данные формы, открыть ссылку в новом окне. Новое окно открывается на ура, но с урлом типа «javascript:doSomethingGood();void(0)», и, естественно, ничего полезного не происходит, потому что в новом окне-то эта функция не определена.Какой смысле использовать ссылку не используя при этом ее атрибут href. Если нужно какое-то действие скриптовое выполнить, то намного логичнее его привязать к тегу button или span, оформив их при помощи стилей подчеркиванием или чем-то типа этого.
На самом деле использование javascsript в href имеет еще один отрицательный момент (я не заметил, чтобы его указали здесь). Очень часто используют скрипт в ссылке, когда по клику нужно открыть картинку или описание продукта. Так вот многие открывают эту ссылку в новой вкладке браузера и получают в адресе страницы "javascript:showPopup(27);", а не то, что они хотели увидеть.
Проверка на работу javascript - это вообще весьма странная вещь. На большинстве сайтов, например, такие пользователи никогда не смогут попасть в подменю. Осуществлять иную навигацию. В общем это сродни проверки на "отключение монитора".
А про flash. Там вообще fscommand есть и целый интерфейс для работы со страницей.
А как быть в случае если событие тегу задаешь в отдельном файле, витоге у меня в FF при нажатии на такую ссылку срабатвает событие, а после переход по адресу в 'href'?
Пока я додумался при создании события менять href на javascript:void(0);
вопрос.
зачем пишется return false; в onclick?
тут например
Чтобы при клике не было перехода по адресу из href.
То есть предполагается, что сначала исполнится функция, которая отменит событие, если javascript включен. Так?
Да.
А я не понял(а) что значит JavaScript:void(0). Это такая предопределённая функция что ли, или почему оно работает даже с выключенным JavaScript? И что оно делает?
void выполняет выражение указанное параметром и всегда возвращает undefined. void(0) - не делает ничего, заглушка. Кстати я предпочитаю писать просто javascript:; - работает везде.
тоже плохо, потому что если в
ajax()произойдет ошыбка тогдаreturn falseне сработает и пользователь перейдет на страницу "включите javascript". Даже если припустить что наш js на продакшене не содержыт ошыбок, то какой ето будет геморой для разработчика каждый раз переходить на nojs.html во время разработки пока js полностю не отлажен!Как по мне лучше так:
"#send_message"лучше писать чем"#"с двух причин:1. пользователь может увидеть в статусе ету подсказку и лучше понять что делает ета кнопка
2. при ошыбке браузер не кинет в верх страницы
Не знаю, говорилось ли здесь, я не заметил. Еще одна причина, чтобы так делать - это скрытие от показа на window.status текста ссылки, потому что они бывают очень неприглядными, как в моем случае, когда сами ссылки генерируются скриптом и имеют много разных параметров.
Привет всем!
У меня тут затык с использованием <a href="javascript:void(0)">link</a>
в ИЕ7 а именно тогда когда страничка загруженна по протоколу https://
Вобшем при клике вылазит ошибка.
Может кто подскажет что же юзать. # не предлагать
Всем спасибочки заранее...
javascript:void(openComment(123))
Ненравится неиспользуй, а что плохо что хорошо не тебе решать.
Правильнее назвать статью, при каких ситуациях лучше неиспользовать........
А как привязать событие к действию пользователя, когда он нажимает на ссылке правую кнопку мыши и выбирает "открыть в новой вкладке"?
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.