Используйте ссылку ТОЛЬКО, когда JavaScript отключен - PullRequest
Новая
       19

Используйте ссылку ТОЛЬКО, когда JavaScript отключен

0 голосов
/ 20 ноября 2018

У меня есть сайт социальной сети для сообщества колледжей, и он работает нормально.Есть функция, позволяющая ставить лайк другим пользователям.Привязка запускается с помощью функции onClick () javascript.

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

Есть ли способ перенаправить пользователя на определенную страницу, если JavaScript отключен?В противном случае скрипт должен работать.

Для более подробной информации, предположим, что мой текущий код выглядит следующим образом: 

<a href="#" onclick="return likeFunction();">Item</a>

что-то вроде: 

<a href="www.mysite.com/postController/likeAction" onclick="return likeFunction();">Like</a>

**, но href должно бытьактивен, только если функция onclick () не работает.это возможно?**

мой сайт построен с php codeigniter.какие-либо решения?

Ответы [ 3 ]

0 голосов
/ 20 ноября 2018

Не путайте ваш HTML, просто улучшите его с помощью JavaScript (см .: Progressive Enhancement ).Это может быть легко достигнуто с помощью класса CSS и селектора документов.

С учетом HTML: 

<a href="/postController/likeAction" class="like">Like</a>

Вы можете добавить самозапускающуюся функцию JavaScript непосредственно перед тегом </body>: 

<script>
(function() {
    document.querySelectorAll('a.like').forEach(function(item) {
        item.removeAttribute('href');
        item.onclick = function() {
            /* add the likeFunction functionality here */
        };
    });
})();
</script>

Это довольно просто;он просматривает все теги <a>, которые имеют class="like", удаляет атрибут href и добавляет функциональность из вашего текущего likeFunction() в событие click (если вы копируете код из likeFunction() в указанное место).

Очевидно, что если JavaScript отключен, DOM не обновляется, и ваш исходный HTML-код остается на месте.

Примечание: поддержка forEach() может быть схематично в браузерах Microsoft .

0 голосов
/ 20 ноября 2018

Почему бы просто не использовать preventDefault()

// if js is disabled, this doesn't execute at all, 
// so the link will work by default and take the user to the url defined inside the `href` tag.
document.getElementById('myLink').addEventListener('click', function(e) {
   e.preventDefault(); // This will tell the browser not to follow the link.

    ... Do Awesome stuff here all day long

});

DEMO

0 голосов
/ 20 ноября 2018

Просто верните false для функции, которая вызывается в событии onClick.Так что либо убедитесь, что likeFunction () возвращает false.Или верните false впоследствии с помощью onClick="likeFunction(); return false;".

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

Кроме того, href должен начинаться с протокола (http://www.example.com вместо www.example.com).

Примечание: вы можете рассмотреть возможность присоединения события JS, вызвав addEventListener вместо использования атрибута onClick.Есть разные минусы и плюсы, использующие оба метода.Я предлагаю вам взглянуть на этот ответ: addEventListener vs onclick .

Редактировать: как было предложено WillardSolutions, вы можете использовать protectDefault, чтобы гарантировать, что ссылка не открывается при вызове события onClick,Для получения более подробной информации, я предлагаю вам взглянуть на этот ответ: event.preventDefault () против возврата false

...