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

615   21  

21 ответов:

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

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

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

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

131  
2017-08-29 17:31:49

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

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

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

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

Установка:

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

рабочая демо!

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

  • хром.
  • Firefox.
  • IE (8-11) и Край.
  • сафари.
95  
2017-05-23 15:26:38 
<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>
59  
2013-12-02 07:53:16

я столкнулся с этим, нуждаясь в решении, которое работало правильно и" красиво " на различных браузерах, включая мобильное сафари (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() (мое старое решение) не работает на мобильном Safari --- он, кажется, ничего не делает (т. е. пользователь все еще может вернуться). history.pushState() работает на всех из них.
  • 3-й аргумент history.pushState() это url. Решения, которые передают строку типа 'no-back-button' или 'pagename' кажется, работает нормально, пока вы не попробуете обновить/перезагрузить страницу, и в этот момент создается ошибка "страница не найдена", когда браузер пытается найти страницу с этим в качестве Url-адреса. (Браузер также, вероятно, будет включать эту строку в адресную строку, когда на странице, что некрасиво.)location.href должно быть использовано для Url-адрес.
  • 2-й аргумент history.pushState() это title. Глядя вокруг в интернете большинство мест говорят, что это "не используется", и все решения здесь проходят null для этого. Однако в мобильном Safari, по крайней мере, это помещает Url-адрес страницы в раскрывающийся список истории, к которому пользователь может получить доступ. Но когда он добавляет запись для посещения страницы обычно, он помещает ее title, что предпочтительнее. Так проходим document.title для этого приводит к тому же поведению.
38  
2015-12-17 16:57:05

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

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

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});
23  
2014-05-22 00:56:55

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

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

    };
10  
2014-01-10 08:27:00 
<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>
9  
2016-03-30 00:28:38

эта статья о 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'
    }
  }
}
7  
2015-02-26 16:57:17 

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

5  
2016-11-24 15:50:26

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

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});
4  
2017-02-07 09:14:35

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

history.pushState(null, null, $(location).attr('href'));
    window.addEventListener('popstate', function () {
        history.pushState(null, null, $(location).attr('href'));
    });
2  
2015-11-12 21:28:00

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

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

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

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

Как Это Работает

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

вот и все. Нет больше возиться, нет фонового мониторинга событий, ничего больше.

Использовать Его В Одну Секунду!--11-->

развернуть, просто добавьте это в любом месте на Вашей странице или в вашей 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>
2  
2017-04-01 19:44:50 
   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>
1  
2014-07-01 09:22:47 
<script language="JavaScript">
    javascript:window.history.forward(1);
</script>
1  
2014-11-25 14:00:06

попробуйте это, чтобы предотвратить кнопку 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>
1  
2015-04-07 17:53:53

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

это в основном назначение окна" 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."; };
    }
);
1  
2016-11-03 13:45:31 
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

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

1  
2018-10-06 19:51:40

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

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

внутри '.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>
внутри '.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 и вызовы идентификатора тега span. Это должно было показать, как вы можете вводить разные HTML в один и тот же тег span на одной странице! Как может Назад / Вперед повлиять на этот дизайн? Это невозможно, потому что вы скрываете объекты и заменяете другие все на той же странице!

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

    document.getElementById('textOverPic').style.display = "none"; //hide
    document.getElementById('textOverPic').style.display = "";     //display
внутри '.функции вызова 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>

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

0  
2014-09-26 04:18:09

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

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

0  
2014-11-03 23:11:11

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

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

работает в моем chrome и firefox

-1  
2014-09-04 15:23:07 
//"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;
}
-1  
2017-07-20 12:57:34

Comments

    Ничего не найдено.
Click here to cancel reply.