jak zatrzymać przycisk powrotu przeglądarki za pomocą javascript

155

Robię quiz online w php. Chcę uniemożliwić użytkownikowi powrót do egzaminu. Wypróbowałem następujący skrypt, ale zatrzymuje on mój zegar. Co powinienem zrobić?

Załączam kod źródłowy. Zegar jest przechowywany w cdtimer.js

<script type="text/javascript">
        window.history.forward();
        function noBack()
        {
            window.history.forward();
        }
</script>
<body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">

Mam licznik czasu egzaminu, który trwa egzamin z wartości mysql . Licznik czasu uruchamia się odpowiednio, ale zatrzymuje się, gdy wstawiam kod wyłączający przycisk Wstecz. Jaki jest mój problem?

javascript browser Sawant Akshay
źródło
dla nodeJS wykryje i zatrzymaj zdarzenie przycisku Wstecz przeglądarki
Darshan Dixit

Odpowiedzi:

157

Istnieje wiele powodów, dla których wyłączenie przycisku Wstecz tak naprawdę nie działa. Najlepszym rozwiązaniem jest ostrzeżenie użytkownika:

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

Ta strona nie wyszczególniają cały szereg sposobów Państwo mogli spróbować wyłączyć przycisk wstecz, ale są gwarantowane none:

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

ColinE
źródło
Powinieneś sprawdzić w swoim kodzie PHP, czy odpowiedź została już przesłana, a jeśli tak, odrzuć ją.
Sela Yair
4
Warto wspomnieć, że w nowoczesnych przeglądarkach sytuacja się zmieniła: patrz stackoverflow.com/questions/19926641/…
devrobf.
126

Generalnie złym pomysłem jest zastępowanie domyślnego zachowania przeglądarki internetowej. Skrypt po stronie klienta nie ma wystarczających uprawnień, aby to zrobić ze względów bezpieczeństwa.

Jest też kilka podobnych pytań,

W rzeczywistości nie można wyłączyć przycisku Wstecz przeglądarki. Możesz jednak robić magię, używając swojej logiki, aby uniemożliwić użytkownikowi nawigację z powrotem, co stworzy wrażenie, jakby było wyłączone. Oto jak, sprawdź następujący fragment.

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

To jest w czystym JavaScript, więc działałoby w większości przeglądarek. Spowoduje to również wyłączenie klawisza Backspace , ale klawisz będzie działał normalnie wewnątrz inputpól i textarea.

Zalecana konfiguracja:

Umieść ten fragment kodu w osobnym skrypcie i umieść go na stronie, na której chcesz uzyskać takie zachowanie. W obecnej konfiguracji wykona onloadzdarzenie DOM, które jest idealnym punktem wejścia dla tego kodu.

Działające DEMO!

Przetestowane i zweryfikowane w następujących przeglądarkach,

  • Chrom.
  • Firefox.
  • IE (8-11) i Edge.
  • Safari.
Rohit416
źródło
1
Nie rozumiem, dlaczego setTimeout. Jeśli na początku dodam #! do lokalizacji i usunąć setTimeout, nadal działa.
baraber
tak to prawda, to zadziała, ale jeśli muszę coś przypomnieć sobie z pamięci, kiedy to miałem na początku ... przepływ nie działał poprawnie w Chrome, tak jak w innych przeglądarkach. Chrome location.hashpoczątkowo zwrócił pusty, więc sprawił, że zrobiłem to w ten sposób. Mogłoby być więcej poprawy, ale 50 ms tylko raz nie kosztowało mnie dużo, więc zostawiam to tam.
Rohit416
Och, to było wyzwanie pamięci, dziękuję :) Użyłem twojego rozwiązania, ale zastąpiłem setInterval przez handler .onhashchange. Działa świetnie. Ale mam jednak inne pytanie: dlaczego „if (global.location.hash! = _Hash)”? Myślę, że ten warunek może być prawdziwy tylko przez cały czas, ponieważ window.location.hash powinien zawsze zwracać hash ze znakiem „#”, a _hash nigdy nie będzie zawierał znaku „#”. Pamiętasz coś na ten temat? Czy to tylko ochrona na wypadek, gdyby przeglądarka nie zwróciła znaku „#” w location.hash?
baraber
Utworzyłem plik .js zgodnie z zaleceniami i umieściłem plik js w moim kodzie, używając następującego: <script src = "./ javascript / noback.js"> </script> Ale nadal mogę wykonać powrót (używając Safari). czego mi brakuje? Ta biblioteka została dodana w taki sam sposób, jak inne biblioteki, których używam, więc dołączanie jest dobre.
Tim
1
Blokuje przycisk Wstecz na iPadzie Air,
iOS
75

Natknąłem się na to, potrzebując rozwiązania, które działałoby poprawnie i „ładnie” w różnych przeglądarkach, w tym Mobile Safari (iOS9 w momencie publikacji). Żadne z rozwiązań nie było całkiem poprawne. Oferuję co następuje (testowane na IE11, FireFox, Chrome i Safari):

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

Zwróć uwagę na następujące kwestie:

  • history.forward()(moje stare rozwiązanie) nie działa w Mobile Safari - wydaje się, że nic nie robi (tj. użytkownik nadal może wrócić). history.pushState()działa na wszystkich z nich.
  • Trzecim argumentem history.pushState()jest adres URL . Rozwiązania, które przekazują ciąg, takie jak 'no-back-button'lub 'pagename'wydają się działać OK, dopóki nie spróbujesz Odśwież / Ponownie załaduj stronę, w którym to momencie generowany jest błąd „Nie znaleziono strony”, gdy przeglądarka próbuje zlokalizować stronę z tym adresem jako adresem URL. (Przeglądarka prawdopodobnie również umieści ten ciąg w pasku adresu, gdy jest na stronie, co jest brzydkie) location.href.
  • drugi argument history.pushState()to tytuł . Rozglądając się po internecie w większości miejsc, stwierdza się, że jest on „nieużywany” i wszystkie przedstawione tutaj rozwiązania mijały nullz tym. Jednak przynajmniej w Mobile Safari powoduje to umieszczenie adresu URL strony na liście historii, do której użytkownik ma dostęp. Ale kiedy normalnie dodaje wpis dotyczący wizyty na stronie, umieszcza w tytule , co jest lepsze. Więc pomijanie document.titletego skutkuje tym samym zachowaniem.
JonBrave
źródło
3
To jest poprawna odpowiedź. Działa doskonale w Chrome, IE 11, Firefox i Edge.
Concept211
3
To powinna być akceptowana odpowiedź, działa na wielu platformach i po prostu działa dobrze.
calbertts
w jsp sevlet Po przesłaniu odświeżam stronę. strona nie jest wyświetlana (błąd)
Madhuka Dilhan
Jak dotąd najlepsze rozwiązanie, ale prawdopodobnie nie działa w starszych przeglądarkach
j4n7
2
Idealne rozwiązanie dla nowoczesnych przeglądarek. Połączyłem z odpowiedzią @ Rohit416, aby obsługiwać starszą przeglądarkę, używając tylko warunku typeof (history.pushState) === "funkcja" działa płynnie.
Miklos Krivan,
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
źródło
3
Geniusz! Użyłem tego, aby zapobiec przypadkowemu uruchomieniu przycisku Wstecz, gdy użytkownik naciśnie przycisk Backspace (na przykład w polach wyłączonych / tylko do odczytu) w aplikacji internetowej, w której powrót / do przodu i tak nie ma sensu. Potwierdzone wyłącza funkcjonalność wstecz i dalej (ale nie same przyciski), w tym opcję menu kontekstowego; sprawdzone w IE8 przez IE11, Chrome i FF.
nic niepotrzebnego
1
To działa, ale resetuje wszystkie dane wprowadzone w polach tekstowych. Czy można zapobiec rozliczeniu?
Somnium
6
U mnie zadziałało na firefoxie, ale nie na chrome (wersja 36.0.1985.143)
baraber
U mnie też to zadziałało, ale w Firefoksie wydaje się, że zepsuje tę window.history.back()funkcję. Chcemy uniemożliwić użytkownikom klikanie przycisku Wstecz w przeglądarce, ale w niektórych przypadkach udostępniamy własny przycisk Wstecz na stronie. Czy jest jakiś sposób, aby to zadziałało?
AsGoodAsItGets
1
To nie działa na mnie. Używam Chrome w wersji 55 w systemie Windows 10. Umieszczam skrypt w kilku miejscach (początek nagłówka, koniec treści itp.) I nadal mogę użyć przycisku Wstecz, aby wrócić do poprzedniej strony.
Victor Stoddard,
28

Ten kod wyłączy przycisk Wstecz w nowoczesnych przeglądarkach obsługujących interfejs API historii HTML5. W normalnych okolicznościach naciśnięcie przycisku Wstecz powoduje cofnięcie się o jeden krok do poprzedniej strony. Jeśli używasz history.pushState (), zaczynasz dodawać dodatkowe pod-kroki do bieżącej strony. Sposób działania jest taki, że gdybyś użył history.pushState () trzy razy, a następnie zacznij naciskać przycisk Wstecz, pierwsze trzy razy spowoduje powrót do tych podetapów, a następnie czwarty raz wróci do poprzednia strona.

Jeśli połączysz to zachowanie z detektorem zdarzenia w popstatezdarzeniu, możesz zasadniczo skonfigurować nieskończoną pętlę stanów podrzędnych. Wczytujesz więc stronę, wciskasz stan podrzędny, a następnie wciskasz przycisk Wstecz, który powoduje wyświetlenie stanu podrzędnego, a także przesuwa kolejny, więc jeśli ponownie naciśniesz przycisk Wstecz, nigdy nie zabraknie stanów podrzędnych do naciśnięcia . Jeśli uważasz, że konieczne jest wyłączenie przycisku Wstecz, to Cię tam zaprowadzi.

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});
Jeremy Warne
źródło
2
W dowolnej przeglądarce spróbuj następnie odświeżyć / załadować stronę, a zostanie wyświetlony komunikat o błędzie „Nie znaleziono strony”, gdy próbuje znaleźć stronę o nazwie no-back-button... (Przeglądarka prawdopodobnie również wyświetli się no-back-buttonw adresie bar, co wydaje się brzydkie.) Szczerze mówiąc, nie jest to jedyne rozwiązanie, które cierpi z tego powodu. Trzecim argumentem history.pushState()jest adres URL i musi to być adres URL bieżącej strony: użyj location.hrefzamiast tego.
JonBrave
4
To zadziałało dla mnie. Wystarczy zmiana „no-back-przycisk” do „window.top.location.pathname + window.top.location.search” i pozostanie nazwa stronie jesteś, nawet w odświeżaniu
Steve
Między innymi to zadziałało dla mnie, upvote. Zobacz stackoverflow.com/questions/19926641/… .
user2171669,
Zbadałem
To bardzo złe rozwiązanie, ponieważ zmieniasz adres URL, więc jeśli klikniesz wstecz i do przodu, Chrome przekieruje na ścieżkę, która nie istnieje
Tallboy
21

W przypadku zdarzenia Restrict Browser back

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};
Fezal halai
źródło
1
To działa świetnie na chrome! Dlaczego ludzie nie głosują, bo to najlepsza odpowiedź?
Tarık Seyceri
1
Właśnie przetestowałem go w systemie Windows 10 w następujących przeglądarkach (działa świetnie) Chrome w wersji 74.0.3729.108 (oficjalna kompilacja) (64-bitowa) Chrome Canary wersja 76.0.3780.0 (oficjalna kompilacja) canary (32-bitowa) Chromium w wersji 66.0. 3355.0 (kompilacja dewelopera) (64-bitowa) Firefox 66.0.3 (64-bitowa) EDGE IE 11 Safari 5.1.7
Tarık Seyceri
2
@ TarıkSeyceri, ponieważ działa to tylko w przeglądarkach, które a) obsługują interfejs API historii b) strona faktycznie używa interfejsu API historii do zarządzania stanem
givanse
Nie działa już w Chrome po wersji 75. Zobacz: support.google.com/chrome/thread/8721521?hl=pl
gen b.
13 

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

Eng Mahmoud El Torri
źródło
12
Chociaż może to być prawidłowa odpowiedź, znacznie bardziej prawdopodobne jest, że pomożesz innym, wyjaśniając, co robi kod i jak działa. Odpowiedzi zawierające tylko kod zwykle otrzymują mniej pozytywną uwagę i nie są tak przydatne, jak inne odpowiedzi.
Aurora0001
Przetestowano w Chrome, Firefox, IE i Edge. To dobrze działa. Uratowałeś mnie.
Nooovice Boooy
12

W ten sposób mogłem to osiągnąć. Dziwna zmiana okna. Lokalizacja nie działała dobrze w chrome i safari. Zdarza się, że plik location.hash nie tworzy wpisu w historii Chrome i Safari. Więc będziesz musiał użyć pushstate. To działa dla mnie we wszystkich przeglądarkach.

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

    };
Sanchitos
źródło
1
To nie działa w IE9 i starszych, pushState nie jest obsługiwane.
Alex
Wspaniały. To dobre podejście i działa w prawie wszystkich najnowszych przeglądarkach.
Venugopal M
1
Działa świetnie w późniejszych IE. Wystarczy umieścić bezpośrednio w dokumencie. $(document).ready(function () { .... });
Już
Pamiętaj, że przed „#nbb” musisz dodać swój obecny adres URI. tj. "konto # nbb"
Mladen Janjetovic
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>
Ashwin Patil
źródło
Czy jest gdzieś dokumentacja event.persisted?
Muhd,
1
Oto link znaleziony do Twojego pytania. Znajdź to tutaj @Muhd
rbashish
Właśnie wypróbowałem ten, ale nie działa
Pedro Joaquín
8

Ten artykuł na jordanhollinger.com jest najlepszą opcją, jaką czuję. Podobna do odpowiedzi Razora, ale nieco jaśniejsza. Kod poniżej; pełne uznanie dla Jordana Hollingera:

Strona przed:

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

Strona z kodem JavaScript bez powrotu:

// 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
źródło
8 
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

Ten javascript nie pozwala na powrót żadnego użytkownika (działa w Chrome, FF, IE, Edge)

Surajit Mitra
źródło
5

Wypróbuj z łatwością:

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});
Lakhan
źródło
5

Ten kod został przetestowany z najnowszymi przeglądarkami Chrome i 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.
źródło
Witaj huyhoang.
Franklin Innocent F
3

Bardzo prosta i przejrzysta funkcja do łamania strzałki wstecz bez ingerencji w późniejszą stronę.

Korzyści:

  • Wczytuje się natychmiast i przywraca oryginalny hash, więc użytkownik nie jest rozpraszany przez widoczną zmianę adresu URL.
  • Użytkownik nadal może wyjść, naciskając 10 razy wstecz (to dobrze), ale nie przypadkowo
  • Brak ingerencji użytkownika, jak w przypadku innych rozwiązań wykorzystujących onbeforeunload
  • Działa tylko raz i nie koliduje z dalszymi operacjami skrótu, jeśli używasz go do śledzenia stanu
  • Przywraca oryginalny hash, więc jest prawie niewidoczny.
  • Używa się, setIntervalwięc nie psuje wolnych przeglądarek i zawsze działa.
  • Czysty Javascript, nie wymaga historii HTML5, działa wszędzie.
  • Dyskretny, prosty i dobrze współgra z innym kodem.
  • Nie używa tego, unbeforeunloadco przerywa użytkownikowi modalne okno dialogowe.
  • Po prostu działa bez zamieszania.

Uwaga: niektóre inne rozwiązania używają onbeforeunload. Proszę nie używać onbeforeunloaddo tego celu, który pojawia się okno dialogowe, gdy użytkownicy próbują zamknąć okno, uderzył backarrow itp czasowniki modalne jak onbeforeunloadzwykle są właściwe tylko w rzadkich przypadkach, na przykład gdy oni faktycznie dokonane zmiany na ekranie i raj” Uratowałem ich, nie w tym celu.

Jak to działa

  1. Wykonywane po załadowaniu strony
  2. Zapisuje oryginalny hash (jeśli jest w adresie URL).
  3. Sekwencyjnie dodaje # / noop / {1..10} do skrótu
  4. Przywraca oryginalny hash

Otóż ​​to. Żadnych dalszych zamieszania, żadnego monitorowania zdarzeń w tle, nic więcej.

Użyj go w jedną sekundę

Aby wdrożyć, po prostu dodaj to w dowolnym miejscu na swojej stronie lub w swoim 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>
błąd krytyczny
źródło
2

Wygląda na to, że zadziałało to dla nas, wyłączając przycisk Wstecz w przeglądarce, a także przycisk Backspace, który cię cofa. 

history.pushState(null, null, $(location).attr('href'));
    window.addEventListener('popstate', function () {
        history.pushState(null, null, $(location).attr('href'));
    });
jgabb
źródło
1 
   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>
user3789888
źródło
1

Po prostu nie możesz i nie powinieneś tego robić. Jednak może to być pomocne

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

Działa w moim Chrome i Firefox

Shailendra Sharma
źródło
1

Spróbuj tego, aby zapobiec przyciskowi Backspace w IE, który domyślnie działa jako „Wstecz”:

<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>
Ajit Kamble
źródło
1

Uważam, że idealne, ale w rzeczywistości rozwiązanie jest całkiem proste, z którego korzystałem od wielu lat.

Zasadniczo przypisuje się zdarzenie „onbeforeunload” okna wraz z trwającymi zdarzeniami „mouseenter” / „mouseleave” dokumentu, więc alert jest wyzwalany tylko wtedy, gdy kliknięcia są poza zakresem dokumentu (którym może być przycisk Wstecz lub Dalej przeglądarki)

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

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);
Abdelqoddous Rifai
źródło
1

W nowoczesnej przeglądarce wydaje się to działać:

// 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)
Joakim L. Christiansen
źródło
1
Nie jestem pewien, co się stało, ale z jakiegoś powodu odrzuciłem tę odpowiedź na innym komputerze. Po prostu informuję, że to nie był mój zamiar, ale nie mogę już cofnąć głosowania: /
Lennard Fonteijn,
Żadne uczucia nie ranią @LennardFonteijn :)
Joakim L. Christiansen
1

Żadna z najczęściej ocenianych odpowiedzi nie działała dla mnie w Chrome 79 . Wygląda na to, że Chrome zmienił swoje zachowanie w odniesieniu do przycisku Wstecz po wersji 75, zobacz tutaj:

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

Jednak w tym wątku Google zadziałała odpowiedź udzielona przez Azrulmukmin Azmi na samym końcu. To jest jego rozwiązanie.

<script>

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

</script>

Problem z Chrome polega na tym, że nie wywołuje zdarzenia onpopstate, chyba że wykonasz akcję przeglądarki (np. Call history.back). Dlatego dodałem je do scenariusza.

Nie do końca rozumiem, co napisał, ale najwyraźniej dodatkowy history.back() / history.forward()jest teraz wymagany do blokowania Back w Chrome 75+.

gen b.
źródło
Po wyszukaniu high & low w końcu zadziałało to również w przeglądarkach Androida, gdzie z jakiegoś powodu zdarzenie przycisku Wstecz przeglądarki nie zostało wykryte w żadnym innym skrypcie, którego próbowałem. Dziękuję, dziękuję, jeszcze raz dziękuję! Przetestowane i działa dobrze pod Chrome 83 zarówno na komputerze, jak i na urządzeniach mobilnych! Gene, jesteś ratownikiem!
Ivan
0

Tworzę jedną stronę HTML (index.html). Tworzę również jeden (mechanizm.js) w folderze / katalogu (skrypt). Następnie umieszczam całą zawartość wewnątrz (index.html), używając w razie potrzeby znaczników formularza, tabeli, zakresu i znaczników DIV. Oto sztuczka, która sprawi, że wstecz / dalej nic nie zrobią!

Po pierwsze, fakt, że masz tylko jedną stronę! Po drugie, użycie JavaScript z tagami span / div do ukrywania i wyświetlania treści na tej samej stronie, gdy jest to potrzebne, za pośrednictwem zwykłych linków!

Wewnątrz „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>

Wewnątrz pliku „Mechanizm.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;
    }

Wygląda dziwnie, ale zwróć uwagę na nazwy i wywołania funkcji, osadzony kod HTML i wywołania identyfikatora tagu span. Miało to pokazać, jak można wstawić inny kod HTML do tego samego tagu span na tej samej stronie! Jak wstecz / dalej może wpłynąć na ten projekt? Nie może, ponieważ ukrywasz obiekty i zastępujesz inne na tej samej stronie!

Jak ukryć i wyświetlić? Oto idzie: Wewnątrz funkcji w 'mechanizmie.js' stosownie do potrzeb, użyj:

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

Wewnątrz funkcji „index.html” wywołanie funkcji za pośrednictwem linków:

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

i

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

Mam nadzieję, że nie sprawiłem ci bólu głowy. Przepraszam, jeśli tak :-)

hacker1033
źródło
0

W moim przypadku było to zamówienie na zakupy. Więc to, co zrobiłem, to wyłączenie przycisku. Gdy użytkownik kliknął z powrotem, przycisk był nadal wyłączony. Kiedy kliknęli wstecz jeszcze raz, a następnie kliknęli przycisk strony, aby przejść dalej. Wiedziałem, że ich zamówienie zostało przesłane i przeskoczyłem na inną stronę.

W przypadku, gdy strona faktycznie się odświeżyła, co spowodowałoby (teoretycznie) dostępność przycisku; Byłem wtedy w stanie zareagować w wczytywaniu strony, że zamówienie zostało już przesłane i przekierować również wtedy.

Valamas
źródło
0 
<script language="JavaScript">
    javascript:window.history.forward(1);
</script>
Kamlesh
źródło
3
1. javascript:Napisany przez Ciebie tekst definiuje etykietę JavaScript o nazwie „javascript”. Bardzo wątpię, że to zamierzyłeś; Podejrzewam, że mylisz się href=javascript:...z <script>blokami JavaScript . 2. language="JavaScript"przestał być prawidłowym <script>atrybutem w HTML5. 3. Powyższe 2 punkty nie mają większego znaczenia; ważne jest to, że history.forward(1)nie działa w Mobile Safari (przynajmniej). history.pushState()Zamiast tego użyj jednej z odpowiedzi.
JonBrave
0

Możesz po prostu umieścić mały skrypt, a następnie sprawdzić. Nie pozwoli ci odwiedzić poprzedniej strony. Odbywa się to w javascript.

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

Funkcja window.onunload uruchamia się podczas próby odwiedzenia poprzedniej lub poprzedniej strony za pomocą przeglądarki.

Mam nadzieję że to pomoże.

noobprogrammer
źródło
0

Miałem ten problem z React.JS. (składnik klasy)

I łatwo rozwiązuj

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

Użyłem HashRouterod react-router-dom.

Oo
źródło
0

Po prostu ustaw location.hash="Something", Po naciśnięciu przycisku Wstecz hash zostanie usunięty z adresu URL, ale strona nie wróci.Ta metoda jest dobra, aby zapobiec przypadkowemu powrocie, ale ze względów bezpieczeństwa powinieneś zaprojektować swój backend, aby zapobiec ponownemu odpowiadaniu

Abhishek
źródło
-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
źródło
1 pobierz obiekt zdarzenia 2. aby określić typ źródła zdarzenia, jako warunek oceny. 3.Gdy trafienie Backspace, typ źródła zdarzenia dla hasła lub pojedynczego, a właściwość readonly na true lub enabled ma wartość false, to błąd klawisza Backspace. Kiedy uderzył Backspace, źródło rodzajów zdarzeń hasło lub pojedynczych, jest brak klawisz Backspace
Chauncey.Zhong
Pytanie dotyczy używania przycisku nawigacyjnego Wstecz, a nie klawisza Backspace.
Quentin