Попытка отключить кнопку возврата браузера - PullRequest
Новая
       85

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

0 голосов
/ 30 января 2020

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

  1. Логин. html <a href = "Home.html">Next Page</a>
  2. Home.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 и затем я нажимаю кнопку возврата, то она остается на той же странице (работает как и ожидалось). Почему так?

Ответы [ 5 ]

1 голос
/ 30 января 2020

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

Также задано несколько похожих вопросов,

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

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

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

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

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

Working Demo link->  http://output.jsbin.com/yaqaho
1 голос
/ 30 января 2020

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

0 голосов
/ 09 мая 2020

Плакаты Трехстороннее решение сработало ОТЛИЧНО !!! 

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

Не позволило бы мне проголосовать или прокомментировать ...

0 голосов
/ 28 марта 2020

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

Наконец-то у меня получилось выполнить требование моего проекта (для Chrome и Firefox): 

history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () => history.forward();
0 голосов
/ 30 января 2020

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

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

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

...