Ik doe een online quiz-applicatie in PHP. Ik wil de gebruiker beperken van teruggaan in een examen.
Ik heb het volgende script geprobeerd, maar het stopt mijn timer.
Wat moet ik doen?
De timer wordt opgeslagen in Bestand CDTIMER.JS .
<script type="text/javascript">
window.history.forward();
function noBack()
{
window.history.forward();
}
</script>
<body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">
Ik heb de examentimer die een duur kost voor het examen van een MySQL-waarde. De timer begint dienovereenkomstig, maar het stopt wanneer ik de code instel voor het uitschakelen van de back-knop. Wat is mijn probleem?
Antwoord 1, Autoriteit 100%
Er zijn talloze redenen waarom het uitschakelen van de back-knop niet echt werkt. Je beste gok is om de gebruiker te waarschuwen:
window.onbeforeunload = function() { return "Your work will be lost."; };
Op deze pagina wordt een aantal manieren weergegeven die u zou kunnen proberen de back-knop uit te schakelen, maar geen enkele is gegarandeerd:
http://www.irt.org/script/311.htm
Antwoord 2, Autoriteit 82%
Het is over het algemeen een slecht idee om het standaardgedrag van de webbrowser te overschrijven. Een client-side-script heeft niet voldoende privilege om dit om veiligheidsredenen te doen.
Er zijn ook een paar soortgelijke vragen gesteld,
u can-not daadwerkelijk de knop Browser terug uitschakelen. U kunt echter magie gebruiken met behulp van uw logica om te voorkomen dat de gebruiker terugvond, die een indruk zal maken zoals deze is uitgeschakeld. Hier is hoe – bekijk het volgende 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 the event bubbling up the DOM tree...
e.stopPropagation();
};
}
})(window);
Dit is in Pure JavaScript, dus het zou in de meeste browsers werken. Het zou ook de toets backspace uitschakelen, maar die toets werkt normaal in inputvelden en textarea.
Aanbevolen configuratie:
Plaats dit fragment in een apart script en plaats het op een pagina waar u dit gedrag wilt hebben. In de huidige opzet zal het de onload-gebeurtenis van de DOM uitvoeren, wat het ideale startpunt is voor deze code.
Het is getest en geverifieerd in de volgende browsers,
- Chroom.
- Firefox.
- Internet Explorer (8-11) en Edge.
- Safari.
Antwoord 3, autoriteit 59%
Ik kwam dit tegen, ik had een oplossing nodig die correct en “goed” werkte in verschillende browsers, inclusief Mobile Safari(iOS 9 op het moment van posten). Geen van de oplossingen klopte helemaal. Ik bied het volgende aan (getest op Internet Explorer 11, Firefox, Chrome en Safari):
history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
history.pushState(null, document.title, location.href);
});
Let op het volgende:
history.forward()(mijn oude oplossing) werkt niet op Mobile Safari — het lijkt niets te doen (d.w.z. de gebruiker kan nog steeds teruggaan).history.pushState()werkt op ze allemaal.- het derde argument voor
history.pushState()is een url. Oplossingen die een string doorgeven zoals'no-back-button'of'pagename'lijken goed te werken, totdat je dan een Refresh/Reload op de pagina probeert, waarna punt een “Pagina niet gevonden”-fout wordt gegenereerd wanneer de browser een pagina probeert te vinden met die als URL. (De browser zal die tekenreeks waarschijnlijk ook in de adresbalk opnemen wanneer hij op de pagina is, wat lelijk is.)location.hrefmoet worden gebruikt voor de URL. - het tweede argument voor
history.pushState()is een titel. Als je op internet rondkijkt, zeggen de meeste plaatsen dat het “niet wordt gebruikt”, en alle oplossingen hier geven daarvoornulldoor. In Mobile Safari wordt de URL van de pagina echter in de vervolgkeuzelijst met geschiedenis geplaatst waartoe de gebruiker toegang heeft. Maar wanneer het normaal een item voor een paginabezoek toevoegt, plaatst het zijn titel, wat de voorkeur heeft. Dus het doorgeven vandocument.titledaarvoor resulteert in hetzelfde gedrag.
Antwoord 4, autoriteit 43%
<script>
window.location.hash = "no-back-button";
// Again because Google Chrome doesn't insert
// the first hash into the history
window.location.hash = "Again-No-back-button";
window.onhashchange = function(){
window.location.hash = "no-back-button";
}
</script>
Antwoord 5, autoriteit 19%
Voor het beperken van de browser-terug-gebeurtenis:
window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
window.history.pushState(null, "", window.location.href);
};
Antwoord 6, autoriteit 17%
Deze code schakelt de terug-knop uit voor moderne browsers die de HTML5 History API ondersteunen. Onder normale omstandigheden gaat het indrukken van de terug-knop één stap terug, naar de vorige pagina. Als je history.pushState() gebruikt, begin je met het toevoegen van extra substappen aan de huidige pagina. De manier waarop het werkt, is dat als je history.pushState() drie keer zou gebruiken, dan op de terug-knop zou drukken, de eerste drie keer zou het terug navigeren in deze substappen, en dan de vierde keer zou het teruggaan naar de vorige pagina.
Als je dit gedrag combineert met een gebeurtenislistener op de gebeurtenis popstate, kun je in wezen een oneindige lus van substatussen instellen. Dus je laadt de pagina, drukt op een substatus en drukt vervolgens op de terug-knop, die een substatus opent en ook een andere indrukt, dus als je nogmaals op de terug-knop drukt, zijn er nooit meer substatussen om op te drukken . Als je denkt dat het nodig is om de terugknop uit te schakelen, dan kom je daar wel.
history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'no-back-button');
});
Antwoord 7, autoriteit 10%
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};
Antwoord 8, autoriteit 9%
Geen van de meest geüpdatete antwoorden werkte voor mij in Chrome 79. Het lijkt erop dat Chrome zijn gedrag heeft gewijzigd met betrekking tot de knop Terug na versie 75. Zie hier:
https://support.google.com/chrome/thread/8721521? hl=nl
In dat Google Thread werkte het antwoord van Azrulmukmin Azmi aan het einde. Dit is zijn oplossing.
<script>
history.pushState(null, document.title, location.href);
history.back();
history.forward();
window.onpopstate = function () {
history.go(1);
};
</script>
Het probleem met chroom is dat het niet de gebeurtenis van Onpopstate triggeert
Tenzij u browseractie maakt (d.w.z. callgeschiedenis.back). Dat is waarom
Ik heb die aan het script toegevoegd.
Ik begrijp niet helemaal wat hij schreef, maar blijkbaar een extra history.back() / history.forward()is nu vereist voor het blokkeren van terug in Chrome 75 +.
Antwoord 9, Autoriteit 7%
Dit is de manier waarop ik het kon bereiken.
raar, het veranderen van venster.locatie werkte niet goed in Google Chrome en Safari.
Het gebeurt dat Location.hash maakt geen vermelding in de geschiedenis voor Chrome en Safari. Dus je zult de pushstate moeten gebruiken.
Dit werkt in alle browsers voor mij.
history.pushState({ page: 1 }, "title 1", "#nbb");
window.onhashchange = function (event) {
window.location.hash = "nbb";
};
Antwoord 10, Autoriteit 6%
<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>
Antwoord 11, autoriteit 6%
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
Deze JavaScript-code staat geen enkele gebruiker toe om terug te gaan (werkt in Chrome, Firefox, Internet Explorer en Edge).
Antwoord 12, autoriteit 5%
Dit artikel op jordanhollinger.comis de beste optie die ik voel. Vergelijkbaar met het antwoord van Razor, maar een beetje duidelijker. Code hieronder; volledige credits voor Jordan Hollinger:
Pagina eerder:
<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>
Pagina van JavaScript van no return:
// 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'
}
}
}
Antwoord 13, autoriteit 5%
Reageren
Voor modale component in React-project is het openenof sluitenvan de modale, controlerende browser terug een noodzakelijke actie.
-
De
stopBrowserBack: de stop van de browser-terug-knopfunctionaliteit, krijgt ook een terugbelfunctie. Deze callback-functie is wat u wiltdoen:const stopBrowserBack = callback => { window.history.pushState(null, "", window.location.href); window.onpopstate = () => { window.history.pushState(null, "", window.location.href); callback(); }; }; -
De
startBrowserBack: de heropleving van de functionaliteit van de browser terug-knop:const startBrowserBack = () => { window.onpopstate = undefined; window.history.back(); };
Het gebruik in uw project:
handleOpenModal = () =>
this.setState(
{ modalOpen: true },
() => stopBrowserBack(this.handleCloseModal)
);
handleCloseModal = () =>
this.setState(
{ modalOpen: false },
startBrowserBack
);
Antwoord 14, autoriteit 4%
Deze code is getest met de nieuwste Chrome- en Firefox-browsers.
<script type="text/javascript">
history.pushState(null, null, location.href);
history.back();
history.forward();
window.onpopstate = function () { history.go(1); };
</script>
Antwoord 15, autoriteit 3%
Probeer het gemakkelijk:
history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.title);
});
Antwoord 16, autoriteit 2%
Zeer eenvoudige en duidelijke functie om de pijl terug te breken zonder de pagina achteraf te verstoren.
Voordelen:
- Laadt onmiddellijk en herstelt de originele hash, zodat de gebruiker niet wordt afgeleid door zichtbaar veranderende URL’s.
- De gebruiker kan nog steeds afsluiten door 10 keer op terug te drukken (dat is een goede zaak), maar niet per ongeluk
- Geen gebruikersinterferentie zoals andere oplossingen met
onbeforeunload - Het wordt maar één keer uitgevoerd en interfereert niet met verdere hash-manipulaties voor het geval je dat gebruikt om de status bij te houden
- Herstelt originele hash, dus bijna onzichtbaar.
- Gebruikt
setInterval, dus het maakt trage browsers niet kapot en werkt altijd. - Puur JavaScript, vereist geen HTML5-geschiedenis, werkt overal.
- Onopvallend, eenvoudig en goed te combineren met andere code.
- Gebruikt
unbeforeunloadniet, wat de gebruiker onderbreekt met een modaal dialoogvenster. - Het werkt gewoon zonder poespas.
Opmerking: sommige van de andere oplossingen gebruiken onbeforeunload. Gebruik nietonbeforeunloadvoor dit doel, er verschijnt een dialoogvenster wanneer gebruikers het venster proberen te sluiten, op de pijl op de back-pijl drukken, enz. Modals zoals onbeforeunloadzijn meestal alleen geschikt in zeldzame omstandigheden, zoals wanneer ze daadwerkelijk wijzigingen op het scherm hebben aangebracht en deze niet hebben opgeslagen, niet voor dit doel.
Hoe het werkt
- Voert uit bij laden van pagina
- Slaat je originele hash op (als die in de URL staat).
- Voegt achtereenvolgens #/noop/{1..10} toe aan de hash
- Herstelt de originele hash
Dat is het. Geen verdere rommel, geen monitoring van achtergrondgebeurtenissen, niets anders.
Gebruik het in één seconde
Als u wilt implementeren, voegt u dit ergens op uw pagina of in uw JavaScript-code toe:
<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>
Antwoord 17
In een moderne browser lijkt dit te werken:
// 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)
Antwoord 18
Ik had dit probleem met React(klassecomponent).
En ik heb het gemakkelijk opgelost:
componentDidMount() {
window.addEventListener("popstate", e => {
this.props.history.goForward();
}
}
Ik heb HashRoutervan react-router-domgebruikt.
Antwoord 19
Dit lijkt voor ons te hebben gewerkt door de terug-knop in de browser uit te schakelen, evenals de backspace-knop die u terugbrengt.
history.pushState(null, null, $(location).attr('href'));
window.addEventListener('popstate', function () {
history.pushState(null, null, $(location).attr('href'));
});
Antwoord 20
Ik geloof dat de perfecte maar toch vrij eenvoudige oplossing eigenlijk vrij eenvoudig is, die ik nu al vele jaren gebruik.
Het wijst in feite de “onbeforeunload”-gebeurtenis van het venster toe samen met de lopende document-‘mouseenter’ / ‘mouseleave’-gebeurtenissen, zodat de waarschuwing alleen wordt geactiveerd wanneer klikken buiten het documentbereik vallen (wat dan ofwel de terug- of vooruit-knop van de browser)
$(document).on('mouseenter', function(e) {
window.onbeforeunload = null;
}
);
$(document).on('mouseleave', function(e) {
window.onbeforeunload = function() { return "You work will be lost."; };
}
);
Antwoord 21
Je kunt gewoon een klein script plaatsen en dan controleren. U kunt de vorige pagina niet bezoeken.
Dit gebeurt in JavaScript.
<script type="text/javascript">
function preventbackbutton() { window.history.forward(); }
setTimeout("preventbackbutton()", 0);
window.onunload = function () { null };
</script>
De window.onunload-functie wordt geactiveerd wanneer u via de browser de vorige of vorige pagina probeert te bezoeken.
Antwoord 22
<script src="~/main.js" type="text/javascript"></script>
<script type="text/javascript">
window.history.forward();
function noBack() {
window.history.forward();
}
</script>
Antwoord 23
Je kunt en mag dit gewoon niet doen. Dit kan echter nuttig zijn:
<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>
Dit werkt in mijn Google Chrome en Firefox.
Antwoord 24
Probeer dit om te voorkomen dat de backspace-knop in Internet Explorer die standaard als “Terug” fungeert:
<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>
Antwoord 25
Voer het codefragment meteen uit en probeer terug te gaan
history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () => history.forward();Antwoord 26
Stel gewoon location.hash="Something"in. Door op de terugknop te drukken, wordt de hash verwijderd uit de URL, maar de pagina gaat niet terug.
Deze methode is goed om te voorkomen dat u per ongeluk teruggaat, maar om veiligheidsredenen moet u uw backend zo ontwerpen dat deze niet opnieuw beantwoordt.
Antwoord 27
Sommige van de oplossingen hier zullen niet voorkomen dat er een back-gebeurtenis plaatsvindt – ze laten een back-gebeurtenis plaatsvinden (en gegevens over de pagina in het browsergeheugen gaan verloren) en dan spelen ze een forward-gebeurtenis om te proberen het feit te verbergen dat er net een gebeurtenis achter de rug is. Wat niet lukt als de pagina een tijdelijke status heeft.
Ik heb deze oplossing geschreven voor React (wanneer de react-router niet wordt gebruikt), die is gebaseerd op het antwoord van vrfvr.
Het zal echt voorkomen dat de terug-knop iets doet, tenzij de gebruiker een pop-up bevestigt:
const onHashChange = useCallback(() => {
const confirm = window.confirm(
'Warning - going back will cause you to loose unsaved data. Really go back?',
);
window.removeEventListener('hashchange', onHashChange);
if (confirm) {
setTimeout(() => {
window.history.go(-1);
}, 1);
} else {
window.location.hash = 'no-back';
setTimeout(() => {
window.addEventListener('hashchange', onHashChange);
}, 1);
}
}, []);
useEffect(() => {
window.location.hash = 'no-back';
setTimeout(() => {
window.addEventListener('hashchange', onHashChange);
}, 1);
return () => {
window.removeEventListener('hashchange', onHashChange);
};
}, []);
Antwoord 28
Ik maak één HTML-pagina (index.html). Ik maak ook een (mechanism.js) in een scriptmap / directory. Vervolgens leg ik al mijn inhoud in (index.html) met gebruik van formulier-, tabel-, span- en div-tags als dat nodig is. Nu, hier is de truc die ervoor zorgt dat terug / vooruit niets doet!
Ten eerste het feit dat je maar één pagina hebt! Ten tweede, het gebruik van JavaScript met span / div-tags om inhoud op dezelfde pagina te verbergen en weer te geven wanneer nodig via reguliere links!
In ‘index.html’:
<td width="89px" align="right" valign="top" style="letter-spacing:1px;">
<small>
<b>
<a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>
</b>
</small>
[ <span id="inCountSPN">0</span> ]
</td>
Binnen ‘mechanism.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() +
" - <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;
}
Het ziet er harder uit, maar noteer de functienamen en oproepen, ingebedde HTML en de spanlabel-ID-oproepen. Dit was om te laten zien hoe je verschillende html in dezelfde spanag tag op dezelfde pagina kunt injecteren! Hoe kan Back / Forward dit ontwerp beïnvloeden? Het kan niet, omdat u objecten verbergt en anderen allemaal op dezelfde pagina vervangen!
Hoe kunnen we zich verbergen en weergeven? Hier gaat:
Binnenfuncties in ‘mechanisme.js’ zoals nodig, gebruik:
document.getElementById('textOverPic').style.display = "none"; //hide
document.getElementById('textOverPic').style.display = ""; //display
Inside ‘Index.html’ Call-functies via links:
<img src="images/someimage.jpg" alt="" />
<span class="textOverPic" id="textOverPic"></span>
en
<a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>
Antwoord 29
In mijn geval was dit een winkelvolgorde. Dus ik heb de knop uitgeschakeld. Wanneer de gebruiker op de knop klikte, werd de knop stil uitgeschakeld. Toen ze nog een keer op de rug klikten en klikte vervolgens op een paginaknop om door te gaan. Ik wist dat hun bestelling werd ingediend en overgeslagen naar een andere pagina.
In het geval wanneer de pagina daadwerkelijk is vernieuwd wat de knop (theoretisch), beschikbaar zou maken; Ik was vervolgens in staat om te reageren in de lading die de bestelling al is ingediend en doorverwezen dan ook.
ANTWOORD 30
Deze code is volledig JavaScript.
Plaats dit op je startpagina of wat je ook nodig hebt wanneer iemand teruggaat, brengt ze naar de pagina waar ze eerder aan waren.
<script type="text/javascript">
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function () { null };
</script>