Скрипт блокировки кнопки назад в браузере

Обновлено: 22.01.2025

В этой статье мы обсудим способы включения и отключения кнопки. Сначала мы рассмотрим, как это делается с помощью простого JavaScript, а затем разберемся, как данный процесс выглядит в случае использования jQuery.

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

В HTML для кнопок предусмотрено собственное состояние, и таким образом, вы можете активировать или отключать кнопки по желанию. К примеру, во время загрузки формы на странице можно деактивировать кнопку, а затем включить ее с помощью JavaScript.

Сейчас на конкретных примерах мы рассмотрим, как можно включать и отключать кнопки с помощью JavaScript.

Включение и отключение кнопки на чистом JavaScript

В этом разделе мы разберем пример кода на чистом JavaScript, который активирует и отключает кнопку. Посмотрите на приведенный ниже фрагмент кода:

Данный код создает простейшую форму с двумя полями для ввода текста и кнопкой для отправки введенных данных на сервер. Важно отметить, что во время загрузки страницы кнопка формы находится в отключенном состоянии – для этого в коде по умолчанию используется свойство disabled .

После загрузки формы в коде предусмотрено событие onchange , связанное с изменением состояния текстовых полей для ввода имени и пароля пользователя. Как только пользователь введет какие-либо данные в любое из этих полей, событие onchange сработает, и вызовет функцию включения и отключения кнопки toggleButton .

Функция toggleButton проверяет, ввел ли пользователь данные в оба обязательных поля. Если пользователь ввел имя и пароль, функция изменит состояние disabled на false , что в итоге приведет к активации кнопки отправки введенных данных. Если же одно из обязательных полей осталось незаполненным, свойство disabled получает параметр true , и как следствие этого, кнопка остается неактивной.

В приведенном выше примере для создания кнопки используется элемент <input> , но при желании также можно использовать HTML-кнопку <button> , как показано ниже:

Вот так и выглядит активация и отключение кнопки на чистом JavaScript. В следующем разделе мы рассмотрим, как включать и отключать кнопки при работе с библиотекой jQuery.

Активация и отключение кнопок на jQuery

Теперь разберемся, как реализовать включение и деактивацию кнопок при помощи библиотеки jQuery. Для этого обратимся к примеру кода из предыдущего раздела. Далее показано как выглядит код при использовании jQuery:

Прежде всего, данный код загружает библиотеку jQuery, чтобы мы могли воспользоваться ее средствами для реализации нашей функции. Для изменения состояния кнопки в данном случае используется метод jQuery-объекта, attr .

Метод attr используется в jQuery для установления и получения значений определенных атрибутов элемента. Если передать методу один аргумент, он вернет значение атрибута объекта. При использовании двух аргументов метод установит новое значение атрибута. В нашем случае метод используется для задания значения disabled атрибуту кнопки. Весь остальной код остается без изменений.

Если вы работаете с jQuery 1.5+, вместо метода attr следует использовать prop , как показано во фрагменте кода, приведенном ниже:

Если же вам потребуется удалить какой-то из атрибутов элемента, можно воспользоваться методом removeAttr . Результат будет таким же, что и при использовании параметра false для свойства disabled :

Заключение

В этом руководстве на двух конкретных примерах мы рассмотрели различные способы активации и отключения кнопки – с помощью чистого JavaScript, и с использованием библиотеки jQuery.

Вероятно, каждый современный SEO-специалист находится в постоянном поиске методов улучшения поведенческих факторов своего сайта. Мы думаем как увеличить конверсию страниц или хотя бы получать «долгие клики».

Google, спасибо за идею

В процессе такого поиска находился и я, когда наткнулся на один интересный комментарий Джона Мюллера из Google. В переводе на русский он звучит примерно так: “те, кто настраивает у себя на сайте отключение кнопки «назад» браузера, не получат ни выгоды, ни проблем при ранжировании в поиске Google. То есть, манипулирование кнопкой возврата в браузере не влечет за собой санкции Google.”, ссылка на саму речь.

Сопоставив дату этой речи Мюллера (10 февраля 2017) с датой выхода патента о поведенческих факторах в Google (12 марта 2019) я крепко усомнился в том что такая техника всё ещё не влияет на ранжирование. Настало время экспериментировать.

Описанный в статье метод относится к категории black hat SEO (черные методы продвижения). Ведь он вредит пользователям вашего сайта и пытается влиять на алгоритмы поисковых систем. Кейс выполнялся исключительно в академических целях.

Ожидаемое влияние блокировки

При этом в Google ситуация обратная, сайты из результатов поиска тут открываются в той же вкладке, что и сам поиск. То есть заблокировав кнопку «назад» мы запрещаем пользователю возвращаться в поиск. У такого пользователя есть три варианта дальнейшего действия.

Действие	Возможная причина
Остаться на сайте	Лучше поискать на сайте интересующую информацию.
Закрыть сайт и не вернуться в поиск	На нашем или другом сайте пользователь уже нашел ответ на свой вопрос, либо вопрос не настолько важный.
Закрыть сайт и вернуться в поиск	Пользователь всё ещё не нашел ответ на свой запрос.

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

• закрыть вкладку,
• заново открыть поисковую систему,
• повторно ввести поисковый запрос.

Если всё это сработает, то в результате мы должны увидеть рост позиций по целевым запросам в Google.

Скрипт блокировки

Для блокировки будем использовать небольшую функцию, выполненную на чистом JavaScript. Вот её код:

var str = document.referrer;
if(str.indexOf('google.') + 1) function preventBack()
setTimeout("preventBack()", 0);
window.onunload = function () ;
>;

В функции мы считываем значение переменной referrer (она показывает откуда пришел пользователь к нам на сайт) и если она содержит подстроку «google.», то запускаем постоянное нажатие на кнопки «вперед» браузера.

У данного скрипта есть и недостаток - при переходе между страницами сайта он может возвращать нас при клике на кнопку «назад» на страницу входа, но после этого произойдет переход «вперед» к внутренней странице на которую мы забрели.

Результат

Для исследования я взял две площадки - статейный сайт и агрегатор, на обоих сайтах до этого уже давно ничего не делалось. После внедрения блокировщика на них также ничего не делалось.

Пример использования скрипта на одном из сайтов:

В результате спустя 4 месяца поисковый трафик Google для агрегатора вырос на 74,4%, а для статейного сайта на 77,6%.

Данные показаны в относительных величинах (по просьбе моих партнеров), но речь идет о росте на несколько тысяч переходов с Google в месяц.

Так как оба сайта монетизируются через AdSense, от роста трафика вырос и доход. Но, приятным бонусом ещё является то что пока пользователь пытается вернуться назад у нас на сайте - он смотрит кучу рекламных объявлений.

В итоге средний расчетный доход по обоим сайтам в AdSense вырос на какие-то нереальные 216%. Правда из-за того что на одном сайте как-то слишком резко вырос доход на тысячу показов, мне кажется правильнее привязываться не к доходу, а к количеству показов рекламы. А количество показов рекламы выросло на 135%!

Что с этим делать

Пожалуй, ничего. Метод, конечно, очень интересный, но перед его использованием стоит крепко подумать: стоит ли выжигать лояльность посетителей своего сайта ради сомнительных результатов в SEO и роста дохода? Думаю, нет.

Остаётся вопрос к представителям Google, почему за такое сайт не получает наложение санкций. Может всё-таки пора их внедрять?

И на этом моменте статья должна была закончиться, но пока я её размещал наткнулся на тестирование в Google чекбокса «Открывать результаты в новой вкладке».

Значит, поисковая система уже знает проблему и собирается исключить возможность такой манипуляции. Будем надеяться что это тестирование покажет положительный результат и Google все-таки сделает бессмысленной блокировку кнопки «назад» в браузере.

вам нужно заставить кэш истекать, чтобы это работало. Поместите следующий код на код страницы.

Не отключайте ожидаемое поведение браузера.

Сделайте ваши страницы обрабатывать возможность пользователей вернуться на страницу или две; не пытайтесь повредить их программное обеспечение.

Я придумал небольшой хак, который отключает кнопки "назад" с помощью JavaScript. Я проверил его на chrome 10, firefox 3.6 и IE9:

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

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

когда пользователь загружает страницу, страница будет показывать только, был ли передан правильный токен (который был передан всем ссылкам/формам на предыдущей странице).

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

конечно, я согласен, что в правило это очень плохая идея. но это уже достаточно ясно.

пока я сам ищу ответ, "Лучшая практика" есть. устаревший. Как и браузеры.(На самом деле браузеры-уродливые окаменелости)

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

Почему? Потому что для моего текущего проекта Я создаю 100% JavaScript встроенный и управляемый интерфейс.. И кнопка "назад" не имеет места в моем проекте, так как нет страницы изменение. (Т. е. кроваво быстро и без мигания страниц из-за обновления.. Так же, как реальное приложение!)

Я знаю, почему способность "highjack" интерфейс не существует, и я это понимаю. Но, по крайней мере, мы должны иметь возможность запросить его из браузера! Теперь это действительно было бы "лучшей практикой" без высоких опасностей.

но браузеры являются браузерами.. Я не ожидаю, что что-то произойдет в этом отношении.

Я искал тот же вопрос, и я нашел следующий код на сайте. Думал поделиться им здесь:

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

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

Я предполагаю, что вы можете сделать это только путем отслеживания на стороне сервера сеанса пользователя и перенаправления (как на сервере.Передача, а не ответ.Redirect) пользователь / браузер на нужную страницу.

было несколько различных реализаций. Существует флэш-решение и некоторые решения iframe/frame для IE. Проверьте это

BTW: есть много веских причин, чтобы отключить (или, по крайней мере, предотвратить 1 шаг) кнопку назад - посмотрите на gmail в качестве примера, который реализует хэш-решение, рассмотренное выше статья.

У меня также была та же проблема, используйте эту функцию Java script на Head tag или in , ее 100% работает нормально, не позволит вам вернуться.

глобально, отключение кнопки "назад" действительно плохая практика. Но в некоторых ситуациях функциональность кнопки "назад" не имеет смысла.

вот один из способов предотвратить нежелательную навигацию между страницами:

начальная страница (файл top.php ):

вторичная страница (файл secondary.php ):

даже я сталкивался с такой же ситуацией раньше. и не было никакой помощи. попробуйте эти вещи, возможно, они будут работать на вас

на странице входа <head> tag:

в кнопке выхода я сделал это:

и на странице входа в систему я поместил фокус на текстовое поле имени пользователя следующим образом:

надеюсь, что это помогает. :) кто-то plz научит меня редактировать эту страницу.

Если вам нужно мягко подавить клавиши delete и backspace в вашем веб-приложении, чтобы при редактировании / удалении элементов страница не перенаправлялась неожиданно, вы можете использовать этот код:

попробуйте этот код. Вам просто нужно реализовать этот код на главной странице, и он будет работать для вас на всех страницах

проблема с Йоси Shasho'код заключается в том, что страница прокручивается вверх каждые 50 мс. Поэтому я изменил этот код. Теперь он отлично работает во всех современных браузерах, IE8 и выше

Я делаю онлайн-викторину на PHP. Я хочу запретить пользователю возвращаться к экзамену.

Я пробовал следующий сценарий, но он останавливает мой таймер.

Что я должен делать?

Таймер хранится в файле cdtimer.js.

• для nodeJS обнаружение и остановка события кнопки возврата браузера

На этой странице перечислены несколько способов мог попробуйте отключить кнопку возврата, но ни одна не гарантирована:

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

Есть еще несколько подобных вопросов,

Как я могу предотвратить возврат по клавише Backspace?

Как я могу предотвратить действие возврата истории браузера по умолчанию для кнопки возврата с помощью JavaScript?

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

Это чистый JavaScript, поэтому он будет работать в большинстве браузеров. Это также отключило бы Backspace ключ, но этот ключ будет нормально работать внутри input поля и textarea .

Рекомендуемая настройка:

Поместите этот фрагмент в отдельный скрипт и включите его на страницу, где вы хотите это поведение. В текущей настройке он выполнит onload событие DOM, которое является идеальной точкой входа для этого кода.

Рабочий DEMO!

Он был протестирован и проверен в следующих браузерах:

Обратите внимание на следующее:

Для события "Ограничить браузер"

Вот как я мог это сделать. Как ни странно, изменение window.location не сработало в хроме и сафари. Бывает, что location.hash не создает запись в истории для chrome и safari. Таким образом, вам придется использовать pushstate. У меня это работает во всех браузерах.

Этот javascript не позволяет пользователям вернуться назад (работает в Chrome, FF, IE, Edge)

• Есть ли где-нибудь документация для event.persisted ?
• 1 Вот ссылка, найденная на ваш вопрос. Найдите здесь @Muhd

Однако в этой ветке Google ответ, предоставленный Азрулмукмином Азми в самом конце, действительно сработал. Это его решение.

Проблема с Chrome заключается в том, что он не запускает событие onpopstate, если вы не выполните действие браузера (например, вызовите history.back). Вот почему я добавил их в сценарий.

Я не совсем понимаю, что он написал, но, видимо, дополнительный history.back() / history.forward() теперь требуется для блокировки Back in Chrome 75+.

• После поиска в высоком и низком диапазоне это, наконец, сработало и в браузерах Android, где по какой-то причине событие кнопки возврата браузера не было обнаружено никакими другими скриптами, которые я пробовал. Спасибо, спасибо, еще раз спасибо! Протестировано и отлично работает под Chrome 83 как на компьютере, так и на мобильном устройстве! Джин, ты же палочка-выручалочка!
• Работает, даже если пользователь не нажимал где-либо на странице. Благодаря!
• Спасибо огромное! Это работает в любых браузерах, а также в мобильных браузерах! Работал как шарм. Так держать! :)
• По-прежнему работает нормально, но после того, как я обновил свой браузер до версии 87.0.4280.66 (официальная сборка) (64-разрядная версия), он не работал. Любая работа для этого?

Этот код протестирован с последними версиями браузеров Chrome и Firefox.

Попробуйте с легкостью:

Очень простая и понятная функция, позволяющая сломать стрелку назад, не мешая впоследствии странице.

Льготы:

• Загружается мгновенно и восстанавливает исходный хэш, поэтому пользователя не отвлекает видимое изменение URL.
• Пользователь все еще может выйти, нажав 10 раз назад (это хорошо), но не случайно
• Никакого вмешательства пользователя, как в других решениях, использующих onbeforeunload
• Он запускается только один раз и не мешает дальнейшим манипуляциям с хешем, если вы используете его для отслеживания состояния.
• Восстанавливает исходный хэш, поэтому почти незаметен.
• Использует setInterval поэтому он не ломает медленные браузеры и всегда работает.
• Чистый Javascript, не требует истории HTML5, работает везде.
• Необъяснимо, просто и хорошо сочетается с другим кодом.
• Не использует unbeforeunload который прерывает пользователя с модальным диалогом.
• Просто работает без суеты.

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

Как это устроено

Вот и все. Больше никаких проблем, никакого мониторинга фоновых событий, ничего больше.

Используйте это за одну секунду

Для развертывания просто добавьте это в любое место на своей странице или в JS:

Похоже, это сработало для нас, отключив кнопку возврата в браузере, а также кнопку возврата, которая возвращает вас назад.

В современном браузере это работает:

• 1 Не уверен, что произошло, но по какой-то причине я отклонил этот ответ на другой машине. Просто сообщаю вам, что это не было моим намерением, но я больше не могу отменить голосование: /
• Не обижайся @LennardFonteijn :)

У меня была эта проблема с React (компонент класса).

Я использовал HashRouter из react-router-dom .

Вы просто не можете и не должны этого делать. Однако, но это может быть полезно

Работает в моем Chrome и Firefox

Я считаю, что идеальное, но все же решение на самом деле довольно простое, и я использовал его уже много лет.

ReactJS

Для модального компонента в проекте ReactJS открытый или же Закрыть модального окна, управление браузером - необходимое действие.

В stopBrowserBack : остановка функции кнопки возврата браузера, также получить функцию обратного вызова. эта функция обратного вызова что ты хочешь делать:

В startBrowserBack : возрождение функциональности кнопки возврата в браузере:

Использование в вашем проекте:

Создаю одну HTML-страницу (index.html). Я также создаю один (механизм.js) внутри папки / каталога (сценария). Затем я помещаю все свое содержимое в (index.html), используя теги form, table, span и div по мере необходимости. Теперь вот трюк, который заставит назад / вперед ничего не делать!

Во-первых, то, что у вас всего одна страница! Во-вторых, использование JavaScript с тегами span / div для скрытия и отображения содержимого на той же странице, когда это необходимо, с помощью обычных ссылок!

Это выглядит странно, но обратите внимание на имена и вызовы функций, встроенный HTML и вызовы идентификаторов тегов span. Это должно было показать, как вы можете вставлять разные HTML в один и тот же тег span на одной странице! Каким образом Back / Forward могут повлиять на этот дизайн? Это невозможно, потому что вы скрываете объекты и заменяете другие объекты на одной странице!

Внутри index.html вызываются функции по ссылкам:

Надеюсь, от меня не заболела голова. Извините, если я сделал :-)

В моем случае это был заказ на покупку. Я отключил кнопку. Когда пользователь щелкнул обратно, кнопка все еще была отключена. Когда они щелкнули еще раз назад, а затем нажали кнопку страницы, чтобы перейти вперед. Я знал, что их заказ был отправлен, и перескочил на другую страницу.

Можно просто поставить небольшой скрипт и потом проверить. Это не позволит вам перейти на предыдущую страницу.

Это сделано в JavaScript.

Функция window.onunload срабатывает, когда вы пытаетесь перейти на предыдущую или предыдущую страницу через браузер.

Некоторые из приведенных здесь решений не будут препятствовать возникновению обратного события - они позволяют произойти обратному событию (и данные, хранящиеся на странице в памяти браузеров, теряются), а затем они воспроизводят прямое событие, чтобы попытаться скрыть тот факт, что обратный событие только что произошло. Что не удастся, если страница находится в переходном состоянии.

Я написал это решение для React (когда реагирующий маршрутизатор не используется), основанное на ответе vrfvr.

Это действительно остановит действие кнопки возврата, если пользователь не подтвердит всплывающее окно:

Читайте также:

  
• Zte blade клавиатура программа для настройки
  
• Как сделать объявление в ворде
  
• Настройка обмена с контролирующими органами 1с сертификат недоступен
  
• Acer liquid s100 прошить
  
• Microsoft office 15 что за папка