Как остановить браузер кнопку назад, используя JavaScript

Я делаю онлайн-приложение викторины в php. Я хочу ограничить пользователя при возвращении на экзамен. Я пробовал следующий скрипт, но он останавливает мой таймер. Что я должен сделать, пожалуйста, предложите мне. Я включил исходный код. Таймер хранится в cdtimer.js

<script type="text/javascript">
        window.history.forward();
        function noBack()
        {
            window.history.forward();
        }
</script>
<body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">

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

Источник

43 ответа

Решение

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

window.onbeforeunload = function() { return "Your work will be lost."; };

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

http://www.irt.org/script/311.htm

Источник

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

Есть несколько похожих вопросов,

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

(function (global) { 

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {            
        noBackPlease();

        // disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // stopping event bubbling up the DOM tree..
            e.stopPropagation();
        };          
    }

})(window);

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

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

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

Рабочая ДЕМО!

Протестировано и проверено в следующих браузерах,

  • Хром.
  • Fire Fox.
  • IE (8-11) и Edge.
  • Сафари.
Источник

Я столкнулся с этим, мне нужно решение, которое работало бы корректно и "красиво" на различных браузерах, включая Mobile Safari (iOS9 на момент публикации). Ни одно из решений не было совершенно правильным. Я предлагаю следующее (проверено на IE11, FireFox, Chrome & Safari):

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
  history.pushState(null, document.title, location.href);
});

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

  • history.forward() (мое старое решение) не работает на Mobile Safari --- кажется, ничего не делает (то есть пользователь все еще может вернуться). history.pushState() работает на всех из них.
  • третий аргумент history.pushState() это URL Решения, которые передают строку как 'no-back-button' или же 'pagename' похоже, работает нормально, пока вы затем не попробуете Обновить / Перезагрузить страницу, после чего генерируется ошибка "Страница не найдена", когда браузер пытается найти страницу с таким URL-адресом. (Браузер также может включать эту строку в адресную строку, когда на странице, что некрасиво.) location.href следует использовать для URL.
  • 2-й аргумент history.pushState() это название. Просматривая Интернет, большинство мест говорят, что оно "не используется", и все решения здесь проходят. null для этого. Однако, по крайней мере, в Mobile Safari это переводит URL страницы в выпадающий список истории, к которому пользователь может получить доступ. Но когда он добавляет запись для посещения страницы в обычном режиме, он добавляет свой заголовок, что является предпочтительным. Так мимоходом document.title за это приводит к тому же поведению.
Источник 
<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>
Источник

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

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};
Источник 

    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

Источник

Этот код отключит кнопку возврата для современных браузеров, которые поддерживают HTML5 History API. В обычных условиях нажатие кнопки "Назад" возвращает вас на один шаг назад к предыдущей странице. Если вы используете history.pushState(), вы начнете добавлять дополнительные подэтапы к текущей странице. Это работает так: если вы должны были использовать history.pushState () три раза, а затем начать нажимать кнопку "Назад", первые три раза она вернется в эти подэтапы, а затем в четвертый раз вернется к предыдущая страница

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

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});
Источник

Ни один из ответов, получивших наибольшее количество голосов, не помог мне в Chrome 79. Похоже, что Chrome изменил свое поведение относительно кнопки "Назад" после версии 75, см. Здесь:

https://support.google.com/chrome/thread/8721521?hl=en

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

<script>

history.pushState(null, document.title, location.href); 
history.back(); 
history.forward(); 
window.onpopstate = function () { 
    history.go(1); 
};

</script>

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

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

Источник

ReactJS

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

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

    const stopBrowserBack = callback => {
  window.history.pushState(null, "", window.location.href);
  window.onpopstate = () => {
    window.history.pushState(null, "", window.location.href);
    callback();
  };
};

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

    const startBrowserBack = () => {
  window.onpopstate = undefined;
  window.history.back();
};

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

handleOpenModal = () =>
  this.setState(
    { modalOpen: true },
    () => stopBrowserBack(this.handleCloseModal)
  );

handleCloseModal = () =>
  this.setState(
    { modalOpen: false },
    startBrowserBack
  );
Источник

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

    history.pushState({ page: 1 }, "title 1", "#nbb");
    window.onhashchange = function (event) {
        window.location.hash = "nbb";

    };
Источник 
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

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

Источник 
<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>
Источник

Эта статья на jordanhollinger.com - лучший вариант, который я чувствую. Похоже на ответ Бритвы, но немного яснее. Код ниже; Полные кредиты Джордану Холлингеру:

Страница перед:

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

Страница без возврата JavaScript:

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}
Источник

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

    <script type="text/javascript">
        history.pushState(null, null, location.href);
        history.back();
        history.forward();
        window.onpopstate = function () { history.go(1); };
    </script>
Источник

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

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});
Источник

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

<script type="text/javascript">
    function preventbackbutton() { window.history.forward(); }
    setTimeout("preventbackbutton()", 0);
    window.onunload = function () { null };
</script>

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

Надеюсь это поможет.

Источник

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

Выгоды:

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

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

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

  1. Выполняет при загрузке страницы
  2. Сохраняет ваш оригинальный хэш (если он есть в URL).
  3. Последовательно добавляет #/noop/{1..10} в хеш
  4. Восстанавливает оригинальный хеш

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

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

Чтобы развернуть, просто добавьте это в любом месте на вашей странице или в вашем JS:

<script>
/* break back button */                                                                        
window.onload=function(){                                                                      
  var i=0; var previous_hash = window.location.hash;                                           
  var x = setInterval(function(){                                                              
    i++; window.location.hash = "/noop/" + i;                                                  
    if (i==10){clearInterval(x);                                                               
      window.location.hash = previous_hash;}                                                   
  },10);
}
</script>
Источник

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

<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>

Работает у меня в Chrome и Firefox

Источник

Просто запустите фрагмент кода сразу и попробуйте вернуться

Источник

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

// https://developer.mozilla.org/en-US/docs/Web/API/History_API
let popHandler = () => {
  if (confirm('Go back?')) {
    window.history.back() 
  } else {
    window.history.forward()
    setTimeout(() => {
      window.addEventListener('popstate', popHandler, {once: true})
    }, 50) // delay needed since the above is an async operation for some reason
  }
}
window.addEventListener('popstate', popHandler, {once: true})
window.history.pushState(null,null,null)
Источник

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

И решить легко

componentDidMount(){
   window.addEventListener("popstate", e=> {
      this.props.history.goForward();
   }
}

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

Источник

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

history.pushState(null, null, $(location).attr('href'));
    window.addEventListener('popstate', function () {
        history.pushState(null, null, $(location).attr('href'));
    });
Источник 
   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>
Источник

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

Это в основном назначение события окна "onbeforeunload" вместе с текущими событиями mouseenter / documentleave документа, так что предупреждение срабатывает только тогда, когда щелчки находятся за пределами области действия документа (которая затем может быть либо кнопкой "назад", либо "вперед" браузера)

$(document).on('mouseenter', function(e) { 
        window.onbeforeunload = null; 
    }
);

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);
Источник

Отключить кнопку возврата в браузере

      <script type="text/javascript">
        history.go(1);
</script>
Источник 
<script language="JavaScript">
    javascript:window.history.forward(1);
</script>
Источник

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

<script language="JavaScript">
$(document).ready(function() {
$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;


    if (event.keyCode === 8 ) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && 
             (
                 d.type.toUpperCase() === 'TEXT' ||
                 d.type.toUpperCase() === 'PASSWORD' || 
                 d.type.toUpperCase() === 'FILE' || 
                 d.type.toUpperCase() === 'EMAIL' || 
                 d.type.toUpperCase() === 'SEARCH' || 
                 d.type.toUpperCase() === 'DATE' )
             ) || 
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        }
        else {

            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }

    try {
        document.addEventListener('keydown', function (e) {
               if ((e.keyCode === 13)){
                  // alert('Enter keydown');
                   e.stopPropagation();
                   e.preventDefault();
               }



           }, true);
        } catch (err) {}
    });
});
</script>
Источник

Если вы используете React, вы можете использовать модуль NPM: use-history-back-trap. Это специальный хук React, который перехватывает обратную навигацию и позволяет возобновить ее позже, если это необходимо.

Использование очень простое:

      const SomeFunctionalReactComponent = () => {
   useHistoryBackTrap(approveNavigation)
   // ...
}

где Appnavigation — это ваша функция, которая возвращает true (или Promise), когда вы хотите продолжить обратную навигацию.

Источник

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

      <script type="text/javascript"> 
        function preventBack() { 
            window.history.forward();  
        } 
          
        setTimeout("preventBack()", 0); 
          
        window.onunload = function () { null }; 
    </script>
Источник

Просто установите location.hash="Something", При нажатии кнопки возврата хеш будет удален из URL-адреса, но страница не вернется назад. Этот метод хорош для предотвращения случайного возврата, но в целях безопасности вы должны спроектировать свой бэкэнд для предотвращения повторного ответа

Источник
Другие вопросы по тегам