Як зупинити кнопку повернення браузера за допомогою JavaScript

155

Я роблю онлайн-програму для вікторини в 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

— Сован Акшай
джерело

для nodeJS виявити і зупинити кнопку події браузера

— Даршан Діксіт

157

Існує чимало причин, чому відключення кнопки "назад" насправді не спрацює. Ваша найкраща ставка - попередити користувача:

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

126

Це, як правило, погана ідея, що скасовує поведінку веб-браузера за замовчуванням. Сценарій на стороні клієнта не має достатніх привілеїв зробити це з міркувань безпеки.

Також є кілька подібних питань,

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

(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, яка є ідеальною точкою входу для цього коду.

Робоча DEMO!

Випробувано та підтверджено у наступних веб-переглядачах,

Хром.
Firefox.
IE (8-11) та Edge.
Сафарі.

— Rohit416
джерело

1

Я не розумію, чому setTimeout. Якщо я просто спочатку додаю #! щоб розташувати та видалити setTimeout, він все ще працює.

— baraber

так правда, вона буде працювати, але якщо мені доведеться згадати щось із пам'яті, коли у мене це було спочатку ... потік не працював належним чином у хромі, як у інших браузерах. Chrome повернув порожнє location.hashспочатку, тому він змусив це зробити так. Це може бути більше вдосконалення, але 50 мс просто один раз мені не коштувало багато, тому я залишаю його там.

— Rohit416

О, це був виклик пам'яті, дякую :) Я використав ваше рішення, але замінив setInterval обробником .onhashchange. Працює чудово. Але в мене є ще одне запитання: навіщо робити "якщо (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

— plugincontainer

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()(моє старе рішення) не працює на мобільному Safari --- він, здається, нічого не робить (тобто користувач все ще може повернутися назад). history.pushState()працює на всіх них.
3-й аргумент до history.pushState()- це URL-адреса . Рішення, які передають рядок на зразок 'no-back-button'або, 'pagename'здається, спрацьовують, доки ви не спробуєте Оновити / Перезавантажити на сторінці, після чого помилка "Сторінка не знайдена" генерується, коли браузер намагається знайти сторінку з такою URL-адресою. (Вірогідний переглядач також може включити цей рядок в адресний рядок, коли на сторінці, що є некрасивим.), location.hrefСлід використовувати для URL- адреси .
другий аргумент до history.pushState()- заголовок . Оглядаючи Інтернет, більшість місць говорять, що він "не використовується", і всі рішення тут прийняті nullдля цього. Однак у мобільному Safari, принаймні, таким чином URL-адреса сторінки переходить у спадне меню історії, користувач може отримати доступ. Але коли він додає запис для відвідування сторінки звичайно, він вводить назву , що є кращим. Тож передача document.titleдля цього призводить до такої ж поведінки.

— JonBrave
джерело

3

Це правильна відповідь. Відмінно працює в Chrome, IE 11, Firefox та Edge.

— Concept211

3

Це має бути прийнятою відповіддю, це крос-платформа і просто чудово працює.

— calbertts

in jsp sevlet Після подачі оновлення сторінки. сторінка не відображається (помилка)

— Madhuka Dilhan

Найкраще рішення поки що, але, мабуть, не працює у старих браузерах

— 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

Геній! Я використовував це, щоб запобігти випадковому натисканню кнопки "Назад", коли користувач потрапляє на Backspace (наприклад, у полях для відключення / лише для читання) у веб-програмі, де назад / вперед все одно не було сенсу. Підтверджений вимикає функціональність назад і вперед (тому не самі кнопки), включаючи опцію контекстного меню; підтверджено в IE8 через IE11, Chrome і FF.

— нічогонеобхідного

1

Це працює, але скидає всі дані, введені в текстові поля. Чи можна запобігти очищенню?

— Somnium

6

Це працювало для мене на Firefox, але не на хромі (версія 36.0.1985.143)

— baraber

Це працювало і для мене, але на Firefox це, здається, порушує цю window.history.back()функцію. Ми хочемо не допустити, щоб користувачі натискали кнопку повернення браузера, але в деяких випадках ми надаємо власну кнопку назад на сторінці. Чи є якийсь спосіб змусити це працювати?

— AsGoodAsItGets

1

Це не працює для мене. Я використовую Chrome версії 55 у Windows 10. Я розміщую скрипт у декількох місцях (початок заголовка, кінець корпусу тощо), і я все ще можу використовувати кнопку "назад", щоб повернутися на попередню сторінку.

— Віктор Стодард

28

Цей код відключить кнопку "Назад" для сучасних браузерів, які підтримують 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');
});

— Джеремі Варн
джерело

2

У будь-якому веб-переглядачі спробуйте сторінку Оновити / Перезавантажити після цього, і ви застрягнете на помилці "Сторінку не знайдено", оскільки вона намагається знайти сторінку з назвою no-back-button... (Вірогідний переглядач також відображатиметься no-back-buttonза адресою брусок теж, що здається негарним.) Справедливо кажучи, це не єдине рішення, яке страждає від цього. 3-й аргумент до history.pushState()- це URL-адреса , і він повинен бути URL-адресою вашої поточної сторінки: використовуйте location.hrefзамість цього.

— JonBrave

4

Це працювало для мене. Просто змініть "кнопка" без зворотного "на" window.top.location.pathname + window.top.location.search ", і вона залишиться іменем сторінки, на якій ви перебуваєте, навіть оновлення

— Стів

Серед інших, це працювало на мене, підняття. Зверніться до stackoverflow.com/questions/19926641/… .

— user2171669

Я досліджував багато випадків, і це найкраще рішення для 1-сторінкового сайту

— djdance

Це дуже погане рішення, тому що ви змінюєте URL-адресу, тож якщо ви кілька разів повернетесь назад і вперед, хром перенаправить на шлях, який не існує

— Tallboy

21

Для події "Обмеження веб-переглядача"

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

— Фезал халай
джерело

1

Це чудово працює на хромі !, чому люди не голосують, оскільки це найкраща відповідь?

— Tarık Seyceri

1

Я щойно тестував його за допомогою ОС Windows 10 на наступних браузерах (чудово працює) Chrome Версія 74.0.3729.108 (Офіційна збірка) (64-розрядна) Chrome Canary Версія 76.0.3780.0 (Офіційна збірка) Canary (32-розрядна) Chromium Версія 66.0. 3355.0 (Збірка для розробників) (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=uk

— ген b.

13

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

— Англ Махмуд Ель Торрі
джерело

12

Хоча це може бути правильною відповіддю, ви набагато більше шансів допомогти іншим, пояснивши, що робить код і як він працює. Відповіді, що стосуються лише коду, зазвичай отримують менш позитивну увагу і не такі корисні, як інші відповіді.

— Aurora0001

Тестовано на Chrome, Firefox, IE та Edge. Це добре працює. Ти врятував мене.

— Nooovice Boooy

12

Це те, як я міг це досягти. Дивно міняти window.location не вийшло добре в хромі та сафарі. Трапляється, що location.hash не створює в історії записів для хромування та сафарі. Таким чином, вам доведеться використовувати pushstate. Це працює для мене у всіх браузерах.

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

    };

— Санчітос
джерело

1

Це не працює в IE9 і нижче, pushState не підтримується.

— Олексій

Чудово. Це хороший підхід і працює майже в усіх останніх браузерах.

— Venugopal M

1

Чудово працює в більш пізніх ІЕ. Просто покладіть прямо в документ. Вже: $(document).ready(function () { .... });

— Oppa Gingham Style

Майте на увазі, що ви повинні додати свій поточний uri перед "#nbb". тобто "рахунок # 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?

— Muhd

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);
});

— Лахан
джерело

5

Цей код протестовано в останніх браузерах Chrome і Firefox.

    <script type="text/javascript">
        history.pushState(null, null, location.href);
        history.back();
        history.forward();
        window.onpopstate = function () { history.go(1); };
    </script>

— Франклін Інокентій Ф
джерело

Ласкаво просимо.

— Franklin Innocent F

3

Дуже проста і чиста функція, щоб переламати стрілку назад, не заважаючи пізніше.

Переваги:

Завантажується миттєво і відновлює оригінальний хеш, тому користувач не відволікається на URL-адресу, помітно змінюється.
Користувач все ще може вийти, натиснувши назад 10 разів (це добре), але не випадково
Немає втручання користувачів, як інші рішення, що використовують onbeforeunload
Він запускається лише один раз і не заважає подальшим хеш-маніпуляціям, якщо ви використовуєте це для відстеження стану
Відновлює оригінальний хеш, такий майже непомітний.
Використовує setIntervalтак, що не порушує повільні браузери і завжди працює.
Чистий Javascript, не вимагає історії HTML5, працює скрізь.
Ненапружений, простий і добре грає з іншим кодом.
Не використовує те, unbeforeunloadщо перериває користувача модальним діалогом.
Це просто працює без суєти.

Примітка: деякі інші рішення використовують onbeforeunload. Будь ласка , не використовуйте onbeforeunloadдля цієї мети, що спливає діалогове вікно кожного разу, коли користувачі намагаються закрити вікно, натисніть назад, і т. Д. Такі способи, як onbeforeunloadправило, підходять лише в рідкісних обставинах, наприклад, коли вони насправді внесли зміни на екрані та у притулку " t врятував їх, не для цієї мети.

Як це працює

Виконує при завантаженні сторінки
Зберігає ваш оригінальний хеш (якщо такий є в 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>

— фатальна помилка
джерело

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>

— користувач3789888
джерело

1

Ви просто не можете і не повинні цього робити. Однак, але це може бути корисним

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

Працює в моєму хромі та 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" / "mouseleave", тому попередження спрацьовує лише тоді, коли кліки виходять за межі документа (що може бути кнопкою "назад" або "вперед" браузера)

$(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 змінив свою поведінку стосовно кнопки "Назад" після версії 75, дивіться тут:

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

Однак у цій темі Google відповідь, надана Azrulmukmin Azmi в самому кінці, справді спрацювала. Це його рішення.

<script>

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

</script>

Проблема з Chrome полягає в тому, що він не викликає події на державному рівні, якщо ви не зробите дії браузера (тобто, історія викликів.back). Ось чому я додав їх до сценарію.

Я не зовсім розумію, що він написав, але, мабуть history.back() / history.forward(), зараз потрібен додатковий для блокування Back в Chrome 75+.

— ген b.
джерело

Після пошуку високого та низького рівня це врешті спрацювало і на браузерах Android, де з певних причин, з яких я намагався, подія кнопки повернення браузера не було виявлено. Дякую, дякую, ще раз дякую! Випробувано та працює в Chrome 83 як настільних, так і мобільних! Джин, ти рятівник!

— Іван

0

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

По-перше, той факт, що у вас є лише одна сторінка! По-друге, використання 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>

Всередині 'mehaniz.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 tag. Це було для того, щоб показати, як можна вводити різні HTML в один і той же проміжок тегів на одній сторінці! Як може Назад / Вперед вплинути на цей дизайн? Це не може, тому що ви приховуєте об'єкти та заміняєте інших на одній сторінці!

Як приховати і відобразити? Ось так: Внутрішні функції в 'механізму.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>

Я сподіваюся, що я не боліла вам. Вибачте, якщо я зробив :-)

— хакер1033
джерело

0

У моєму випадку це було замовлення на покупки. Тож, що я зробив, було відключити кнопку. Коли користувач натиснув кнопку назад, цю кнопку все одно було відключено. Коли вони ще один раз натискали назад, а потім натискали кнопку сторінки, щоб перейти вперед. Я знав, що їхнє замовлення було подано і перейшов на іншу сторінку.

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

— Валами
джерело

0

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

— Камлеш
джерело

3

1. javascript:Написане вами визначає ярлик JavaScript під назвою "javascript". Я дуже сумніваюся, що ви цього мали намір; Я підозрюю, що ви змішуєтесь href=javascript:...з <script>блоками JavaScript . 2. language="JavaScript"перестав бути дійсним <script>атрибутом у HTML5. 3. Зазначені вище пункти не мають великого значення; Що важливо, це те, що history.forward(1)він не працює в мобільному 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 - для істинної або увімкненої властивості є помилковою, тоді помилка ключа назад. При натисканні на Backspace джерелом події вводиться пароль або сингл, є помилка ключа в

— зворотному

Постає запитання про використання кнопки "Назад навігація", а не клавіші "назад".

— Квентін