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

156

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

javascript  browser 
— Савант Акшай
источник
— Даршан Диксит

Ответы:

158

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

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

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

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

— Coline
источник
Вы должны проверить в своем PHP-коде, был ли ответ уже отправлен, и если так, отклоните его.
— Sela Yair
4
Стоит отметить , что все теперь изменилось в современных браузерах: см stackoverflow.com/questions/19926641/...
— devrobf
129

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

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

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

(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.
  • Сафари.
— Rohit416
источник
1
Я не понимаю, почему setTimeout. Если я просто добавлю #! чтобы найти и удалить setTimeout, он все еще работает.
— Baraber
да, правда, это будет работать, но я, если мне придется что-то вспомнить из памяти, когда у меня было это на первом месте ... поток не работал должным образом в Chrome, как в других браузерах. location.hashИзначально Chrome вернул пустое место, поэтому я сделал это так. Это могло бы быть лучше, но 50 мсек один раз не стоили мне много, поэтому я оставил это там.
— Rohit416
О, это была проблема с памятью, спасибо :) Я использовал ваше решение, но заменил setInterval на обработчик .onhashchange. Работает отлично. Но у меня есть еще один вопрос: почему «if (global.location.hash! = _Hash)»? Я думаю, что это условие может быть истинным только все время, потому что window.location.hash всегда должен возвращать хеш с символом «#», а _hash никогда не будет содержать символ «#». Вы помните что-нибудь по этому поводу? Это просто защита на случай, если браузер не вернет символ '#' в location.hash?
— Baraber
Я создал файл .js в соответствии с рекомендациями и включил файл js в свой код, используя следующее: <script src = "./ javascript / noback.js"> </ script> Но я все еще могу выполнить возврат (используя Safari). Чего мне не хватает? Эта библиотека была добавлена ​​так же, как и другие библиотеки, которые я использую, так что включение - это хорошо.
— Тим
1
Блокирует кнопку возврата на ipad air, ios 8
— плагинконтейнер
75

Я столкнулся с этим, мне нужно решение, которое работало бы корректно и «красиво» на различных браузерах, включая 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()работает на всех из них.
  • 3-й аргумент history.pushState()- это URL . Решения, которые передают строку вроде 'no-back-button'или, 'pagename'кажется, работают нормально, пока вы не попробуете Обновить / Обновить на странице, после чего генерируется ошибка «Страница не найдена», когда браузер пытается найти страницу с таким URL-адресом. (Браузер также может включать эту строку в адресную строку, когда на странице, что некрасиво.) location.hrefДолжен использоваться для URL.
  • 2-й аргумент history.pushState()- это заголовок . Просматривая Интернет, большинство мест говорят, что оно «не используется», и все решения здесь проходят null. Однако, по крайней мере, в Mobile Safari это переводит URL страницы в выпадающий список истории, к которому пользователь может получить доступ. Но когда он добавляет запись для посещения страницы в обычном режиме, он добавляет свой заголовок , что является предпочтительным. Таким образом, переход document.titleк этому приводит к тому же поведению.
— JonBrave
источник
3
Это правильный ответ. Отлично работает на Chrome, IE 11, Firefox и Edge.
— Concept211
3
Это должен быть принятый ответ, он кроссплатформенный и просто отлично работает.
— Calbertts
в jsp sevlet После отправки я обновляю страницу. страница не отображается (ошибка)
— Мадхука Дилхан
Лучшее решение на данный момент, но, вероятно, не работает в старых браузерах
— j4n7
2
Идеальное решение для современных браузеров. Я объединился с ответом @ Rohit416 для поддержки более старого браузера, просто используя условие typeof (history.pushState) === «функция» работает гладко.
— Миклос Криван
74 
<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>
— vrfvr
источник
3
Genius! Я использовал это для предотвращения случайного срабатывания кнопки «Назад», когда пользователь нажимает клавишу «Backspace» (например, на отключенных / только для чтения полях) в веб-приложении, где «назад / вперед» в любом случае не имеет смысла. Подтверждено отключает функции «назад» и «вперед» (кроме самих кнопок), включая опцию контекстного меню; проверено в IE8 через IE11, Chrome и FF.
— ничего лишнего
1
Это работает, но сбрасывает все данные, введенные в текстовые поля. Можно ли предотвратить очистку?
— Сомниум
6
У меня это работало на Firefox, но не на Chrome (версия 36.0.1985.143)
— baraber
Это сработало и для меня, но в Firefox, похоже, это нарушает window.history.back()функцию. Мы хотим запретить пользователям нажимать кнопку «Назад» в браузере, но в некоторых случаях мы предоставляем собственную кнопку «Назад» на странице. Есть ли способ заставить его работать?
— AsGoodAsItGets
1
Это не работает для меня. Я использую Chrome версии 55 в Windows 10. Я помещаю скрипт в несколько мест (начало заголовка, конец тела и т. Д.), И я все еще могу использовать кнопку «Назад», чтобы вернуться на предыдущую страницу.
— Виктор Стоддард
28

Этот код отключит кнопку возврата для современных браузеров, которые поддерживают 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');
});
— Джереми Варн
источник
2
В любом браузере попробуйте страницу Обновить / Обновить после этого, и вы застрянете при ошибке «Страница не найдена», так как она пытается найти страницу с именем no-back-button... (Браузер также может отображаться no-back-buttonв адресе бар тоже, что кажется некрасивым.) Чтобы быть справедливым, это не единственное решение, которое страдает от этого. Третий аргумент to history.pushState()является URL-адресом и должен быть URL-адресом вашей текущей страницы: используйте location.hrefвместо этого.
— JonBrave
4
Это сработало для меня. Просто измените «кнопку без возврата» на «window.top.location.pathname + window.top.location.search», и она останется именем страницы, на которой вы находитесь, даже в обновлении
— Steve
Среди прочего, это сработало для меня, upvote. Обратитесь к stackoverflow.com/questions/19926641/… .
— user2171669
Я исследовал много случаев, и это лучшее решение для одностраничного сайта
— djdance
Это очень плохое решение, потому что вы меняете URL-адрес, поэтому, если вы несколько раз нажмете назад и вперёд, Chrome перенаправит вас на несуществующий путь
— Tallboy
21

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

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};
— Fezal Halai
источник
1
Это прекрасно работает на Chrome !, почему люди не голосуют, так как это лучший ответ?
— Tarık Seyceri
1
я только что проверил это, используя ОС Windows 10 в следующих браузерах (прекрасно работает) Chrome версии 74.0.3729.108 (официальная сборка) (64-разрядная версия) Chrome Canary версия 76.0.3780.0 (официальная сборка) канарская (32-разрядная версия) Chromium версия 66.0. 3355.0 (Developer Build) (64-разрядная версия) Firefox 66.0.3 (64-разрядная версия) EDGE IE 11 Safari 5.1.7
— Tarık Seyceri
2
@ TarıkSeyceri, потому что это работает только в браузерах, которые а) поддерживают API истории; б) страница фактически использует API истории для управления состоянием
— givanse
Не работает больше в Chrome после версии 75. См: support.google.com/chrome/thread/8721521?hl=en
— ген б.
13 

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

— Eng Махмуд Эль Торри
источник
12
Хотя это может быть правильным ответом, вы, скорее всего, поможете другим, объяснив, что делает код и как он работает. Ответы только на код, как правило, получают меньше положительного внимания и не так полезны, как другие ответы.
— Aurora0001
Протестировано на Chrome, Firefox, IE и Edge. Это работает хорошо. Ты спас меня.
— Nooovice Boooy
12

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

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

    };
— Sanchitos
источник
1
Это не работает в IE9 и ниже, pushState не поддерживается.
— Алекс
Отлично. Это хороший подход и работает практически во всех последних браузерах.
— Венугопал М
1
Прекрасно работает в более поздних версиях IE. Просто поместите прямо в документ. $(document).ready(function () { .... });
— Уже
Имейте в виду, что вы должны добавить свой текущий URI перед "#nbb". т.е. "account # nbb"
— Младен Янетович
9 
<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>
— Эшвин Патил
источник
Есть ли где-нибудь документация для event.persisted?
— 13:30
1
Вот ссылка на ваш вопрос. Найдите это здесь @Muhd
— rbashish
Я только что попробовал этот, не работает
— Педро Хоакин
8

Эта статья на 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'
    }
  }
}
— dav_i
источник
8 
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

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

— Сураджит Митра
источник
5

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

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

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

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

  • Загружает мгновенно и восстанавливает оригинальный хеш, поэтому пользователь не отвлекается на видимые изменения 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>
— фатальная ошибка
источник
2

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

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

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

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

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

— Шайлендра Шарма
источник
1

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

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

По сути, это назначение события «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."; };
    }
);
— Абделькоддус Рифаи
источник
1

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

// 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)
— Йоаким Л. Кристиансен
источник
1
Не уверен, что случилось, но я почему-то отказался от этого ответа на другой машине. Просто сообщить вам, что это не было моим намерением, но я больше не могу отменить голосование: /
— Леннард Фонтейн
Нет чувств обиженных @LennardFonteijn :)
— Йоаким Л. Кристиансен
1

Ни один из наиболее востребованных ответов не сработал для меня в Chrome 79 . Похоже, что Chrome изменил свое поведение по отношению к кнопке Back после версии 75, смотрите здесь:

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

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

<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+ требуется дополнительное .

— ген б.
источник
После поиска по максимуму и минимуму это наконец-то сработало и в браузерах Android, где по какой-то причине событие кнопки возврата браузера не было обнаружено ни в одном другом скрипте, который я пробовал. Спасибо, спасибо, еще раз спасибо! Протестировано и отлично работает под Chrome 83 как для настольных компьютеров, так и для мобильных устройств! Джин, ты спасатель!
— Иван
0

Я создаю одну HTML-страницу (index.html). Я также создаю один (mechan.js) внутри (скрипт) папку / каталог. Затем я размещаю весь свой контент внутри (index.html), используя теги form, table, 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 может повлиять на этот дизайн? Это невозможно, потому что вы прячете объекты и заменяете других на одной странице!

Как скрыть и отобразить? Вот как это делается: Внутри функций в файле mechan.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>

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

— hacker1033
источник
0

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

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

— Valamas
источник
0 
<script language="JavaScript">
    javascript:window.history.forward(1);
</script>
— Kamlesh
источник
3
1. javascript:Написанное вами определяет метку JavaScript с именем «javascript». Я очень сомневаюсь, что вы это хотели; Я подозреваю, что вы путаетесь href=javascript:...с <script>блоками JavaScript . 2. language="JavaScript"перестал быть действительным <script>атрибутом в HTML5. 3. Вышеуказанные 2 пункта не имеют большого значения; важно то, history.forward(1)что не работает в Mobile Safari (по крайней мере). history.pushState()Вместо этого используйте один из ответов.
— JonBrave
0

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

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

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

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

— noobprogrammer
источник
0

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

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

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

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

— Оо
источник
0

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

— Абхишек
источник
-1 
//"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;
}
— Chauncey.Zhong
источник
1 получить объект события 2. определить тип источника события в качестве условия оценки. 3. Когда нажатие Backspace, тип источника события для пароля или одного и свойство readonly для свойства true или enabled имеет значение false, происходит сбой ключа возврата. Когда нажата Backspace, источником события является
— Chauncey.Zhong
Вопрос в том, чтобы использовать кнопку навигации назад, а не клавишу возврата.
— Квентин
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.