Попытка отключить кнопку «Назад» в браузере

Я написал два файла HTML:

  1. Логин.html <a href = "Home.html">Next Page</a>
  2. Главная.html`

<html>
   <body>
      <a href = >Login.html>>Prev Page</a>
   </body>
<script type = "text/javascript" >

	history.pushState("anything", "", "#1");
    	window.onhashchange = function (event) {
       		window.location.hash = "a";
    	};
</script>
</html>

` Я пытаюсь отключить кнопку "Назад" в браузере. Если я выполняю этот код в Chrome, он не отключает кнопку «Назад», но если я запускаю команду history.state в консоли страницы Home.html, а затем нажимаю кнопку «Назад», она остается на той же странице (работает как положено). Почему так?


javascript html5-history
person Saksham Chaudhary    schedule 30.01.2020    source источник
comment
См. раздел , как остановить кнопку возврата браузера с помощью javascript и Как отключить кнопку "Назад" в браузере с помощью javascript.   -  person showdev    schedule 30.01.2020

Ответы (4)


arrow_upward
4
arrow_downward

FOA, Спасибо всем за ответы.

Наконец, приведенный ниже код дал мне решение:

history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () => history.forward();

person Saksham Chaudhary    schedule 28.03.2020
comment
Может кто-нибудь объяснить, зачем нужны первые 2 строки? Простое добавление window.onpopstate = () => history.forward(); у меня отлично работает - person D_S_X; 18.01.2021

arrow_upward
1
arrow_downward

Вы не можете отключить кнопку «Назад» в браузере. Если бы вы могли, это было бы угрозой безопасности, и поставщики браузеров, скорее всего, попытались бы это исправить.

person Ken Kinder    schedule 30.01.2020
comment
согласно принятому ответу, это устарело, верно? - person David Walser; 19.10.2020
comment
нет. первый ответ - манипулирование историей, а не отключение кнопки «Назад» - person Ken Kinder; 22.10.2020

arrow_upward
1
arrow_downward

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

Подобных вопросов тоже немного,

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

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

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

(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, поэтому он будет работать в большинстве браузеров. Это также отключит клавишу возврата, но клавиша будет нормально работать внутри полей ввода и текстовой области.

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

Working Demo link->  http://output.jsbin.com/yaqaho
person rajat.gite    schedule 30.01.2020

arrow_upward
0
arrow_downward

API истории HTML5 дает разработчикам возможность изменять URL-адрес веб-сайта без полного обновления страницы. Это особенно полезно для загрузки частей страницы с помощью JavaScript, когда содержимое значительно отличается и требует нового URL-адреса.

Вы можете проверить эту ссылку, это может быть полезно

https://css-tricks.com/using-the-html5-history-api/

person Thriveni    schedule 30.01.2020