Как остановить кнопку назад браузера с помощью 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. Таймер запускается соответствующим образом, но останавливается, когда я ввожу код для отключения кнопки "Назад". В чем моя проблема?

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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

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

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

Рабочая DEMO!

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

  • Chrome.
  • Firefox.
  • IE (8-11) и Edge.
  • Safari.

Ответ 3

<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>

Ответ 4

Я столкнулся с этим, нуждаясь в решении, которое работало корректно и "хорошо" в различных браузерах, включая 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.
  • Второй аргумент history.pushState() - это заголовок. Оглядываясь в Интернете, большинство мест говорят, что оно "не используется", и все решения здесь проходят null для этого. Однако, по крайней мере, в Mobile Safari, который помещает URL страницы в раскрывающийся список истории, пользователь может получить доступ. Но когда он добавляет запись для посещения страницы в обычном режиме, она помещает в свой заголовок, что предпочтительнее. Таким образом, передача document.title для этого приводит к такому же поведению.

Ответ 5

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

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

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});

Ответ 6

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

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

    };

Ответ 7

<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>

Ответ 8

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

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

<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'
    }
  }
}

Ответ 9

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

Ответ 10

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

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

Ответ 11

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

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

Ответ 12

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

Преимущества:

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

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

Как это работает

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

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

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

Чтобы развернуть, просто добавьте это где угодно на своей странице или в 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>

Ответ 13

Кажется, это сработало для нас, отключив кнопку "Назад" в браузере, а также нажав кнопку возврата назад.

history.pushState(null, null, $(location).attr('href'));
    window.addEventListener('popstate', function () {
        history.pushState(null, null, $(location).attr('href'));
    });

Ответ 14

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

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

Ответ 15

   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>

Ответ 16

<script language="JavaScript">
    javascript:window.history.forward(1);
</script>

Ответ 17

Попробуйте это, чтобы предотвратить кнопку backspace в 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>

Ответ 18

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

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

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

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);

Ответ 19

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

// 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)

Ответ 20

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

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

Работает на моем хром и firefox

Ответ 21

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

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

Внутри 'index.html':

    <td width="89px" align="right" valign="top" style="letter-spacing:1px;">
     <small>
      <b>
       <a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>&nbsp;
      </b>
     </small>
     [&nbsp;<span id="inCountSPN">0</span>&nbsp;]
    </td>

Внутри 'mechan.js':

    function DisplayInTrafficTable()
    {
     var itmsCNT = 0;
     var dsplyIn = "";
     for ( i=0; i<inTraffic.length; i++ )
     {
      dsplyIn += "<tr><td width='11'></td><td align='right'>" + (++itmsCNT) + "</td><td width='11'></td><td><b>" + inTraffic[i] + "</b></td><td width='11'></td><td>" + entryTimeArray[i] + "</td><td width='11'></td><td>" + entryDateArray[i] + "</td><td width='11'></td></tr>";
     }
     document.getElementById('inOutSPN').innerHTML = "" +
                                             "<table border='0' style='background:#fff;'><tr><th colspan='21' style='background:#feb;padding:11px;'><h3 style='margin-bottom:-1px;'>INCOMING TRAFFIC REPORT</h3>" + DateStamp() + "&nbsp;&nbsp;-&nbsp;&nbsp;<small><a href='#' style='letter-spacing:1px;' onclick='OpenPrintableIn();'>PRINT</a></small></th></tr><tr style='background:#eee;'><td></td><td><b>###</b></td><td></td><td><b>ID #</b></td><td></td><td width='79'><b>TYPE</b></td><td></td><td><b>FIRST</b></td><td></td><td><b>LAST</b></td><td></td><td><b>PLATE #</b></td><td></td><td><b>COMPANY</b></td><td></td><td><b>TIME</b></td><td></td><td><b>DATE</b></td><td></td><td><b>IN / OUT</b></td><td></td></tr>" + dsplyIn.toUpperCase() + "</table>" +
                                             "";
     return document.getElementById('inOutSPN').innerHTML;
    }

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

Как скрыть и отобразить? Вот оно: Внутри функции "механизм .js" по мере необходимости используйте:

    document.getElementById('textOverPic').style.display = "none"; //hide
    document.getElementById('textOverPic').style.display = "";     //display

Внутри 'index.html' функции вызова через ссылки:

    <img src="images/someimage.jpg" alt="" />
    <span class="textOverPic" id="textOverPic"></span>

и

    <a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>

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

Ответ 22

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

В случае, когда страница действительно обновилась, что сделает кнопку (теоретически) доступной; Затем я смог отреагировать на загрузку страницы, что заказ уже отправлен и снова перенаправлен.

Ответ 23

//"use strict";
function stopBackSpace(e) {
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');

    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    // null
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;
    // when click Backspace,judge the type of obj.

    var flag1 = ((t == 'password' || t == 'text' || t == 'textarea') && ((vReadOnly == true || vReadOnly == 'readonly') || vEnabled != true)) ? true : false;

    var flag2 = (t != 'password' && t != 'text' && t != 'textarea') ? true : false;

    if (flag2) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
    if (flag1) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
}
if (typeof($) == 'function') {
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 8) {
                return stopBackSpace(e);
            }
        });
    });
} else {
    document.onkeydown = stopBackSpace;
}