How to disable device Back button (pc, tablet and mobile)

Scriptcase 8 Discussion
#1

Hi,

Just want to share an usefull function : disable or control back button on page

insert this lines in OnApllicationInit event :

echo “<script type=‘text/javascript’>
if( window.history && window.history.pushState ){
history.pushState( ‘nohb’, null, ‘’ );
$(window).on( ‘popstate’, function(event){
if( !event.originalEvent.state ){
history.pushState( ‘nohb’, null, ‘’ );
return;
}
});
}
</script>”;

Nac

#2

I will try, thanks for share

#3

Doesn’t work with Control App in OnApplicationInit event but well if you put it on header variable in Layout Setting : for ex: in a global variable

#4

Wauw, what a great solution to a big problem. Tnx for sharing, in the header it works like charm!

#5

Didnt tried yet, but I guess for projects with menu shouod work using this just in menu right?

#6

just in menu app is enough

#7

Under menu you have to add JQuery:

echo "<script type="text/javascript" src="" . $_SESSION['scriptcase']['menu']['glo_nm_path_prod'] . "/third/jquery/js/jquery.js"></script>";

But, don’t works for me. Back button still working

#8

Put in onapplicationinit of the menu:


[glob_disable]="<script type='text/javascript'>
if( window.history && window.history.pushState ){
history.pushState( 'nohb', null, '' );
$(window).on( 'popstate', function(event){
if( !event.originalEvent.state ){
history.pushState( 'nohb', null, '' );
return;
}
});
}
</script>";

Then enable header and put in one of the templatevariables [glob_disable].‘your regular text if any’

That works for me.

#9

You are right. Curious why is not working in the other way.

1 Like
#10

This is a God sent solution: thanks you all.

Will try but please clarify to me what the above section is doing. The header is enabled but how/ where exactly do I put [glob_disable].‘my regular text’. In my case, the only header variable I am using is LIN1_COL1 and it is set to image.

Thanks in advance.

#11

If your header template has more than one field use a free one, setting it to type value. If you haven’t then choose a header template that has more than one field (afaik all default have).

#12

Unfortunately this solution is not quite fail proof. It does not seem to work on Chrome (50) en IE (11).

#13

Hello,

Good morning guys, I have a question. Could you provide me an example case where you need to disable device back button? Thank you in advance.

#14

so any clues why it is not working in CHROME ? any workarounds ?

#15

This work fine for me with Chrome, I include it directly in the HTML Header Templates so it work for all applications

<script type=‘text/javascript’>
/* 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>