818
Views
12
Comments
Disable browser back button
Question
Application Type
Reactive

Hi

I’m trying to disable or unutilized the browser back button, so that the user may not go back, I have tried the following JS code.

window.history.pushState(null, "", document.URL);        

      window.onpopstate = function() {

          window.history.pushState(null, "", document.URL);

  };

After clicking on back button user can not go back to previous page but browser title is changing for previous page, how to solve this please help.


2018-10-29 08-31-03
João Marques
 
MVP

Hi Shrinjala,


Try the following JS:


history.pushState(null, document.title, location.href);

window.addEventListener('popstate', function (event)

{

  history.pushState(null, document.title, location.href);

});


That should do the trick.



Kind Regards,
João

2020-12-07 13-51-26
Shrinjala Singh

Hi João,

I have tried this also but facing same issue.

2021-02-18 12-29-06
António Pereira
Champion

Hi Shrinjala, 

Check the Navigation JavaScript API made available by the OutSystems Platform. There you will find the "registerBackNavigationHandler" function to manage the back button. Check if it fits your challenge.


P.S.: Allow me to challenge if you really need to control the back button? This is not a recommended behavior by many developers.


Cheers,

António Pereira

2024-10-25 09-14-42
Christopher Bautista

Hi Shrinjala,

Good morning!

Might this post can help:

https://www.outsystems.com/forums/discussion/9789/transactional-apps-and-the-back-button/

Kind regards,

Chris

2020-12-07 13-51-26
Shrinjala Singh

Thank you so much all for your response, issue is resolved,

2024-12-28 12-15-31
JEET VORA

can you help me to restrict user to go back

UserImage.jpg
Miguel Angel Beltran Vargas

How did you do it?

2020-12-07 13-51-26
Shrinjala Singh

Hello,

I have used the below Javascript

window.history.pushState(null, "", window.location.href);        

window.onpopstate = function(event) {

    window.history.pushState(null, "", window.location.href);

    var tl =  document.title;

    document.title="";

    document.title= tl;

};


Please try if it can help you as well.

Thanks



2022-08-30 03-49-55
jas_http

hi may I know where did you implement it? Thank you

2023-08-28 07-00-10
Paulo Torres
Champion

You should place the script in OnReady of the page. This works well

UserImage.jpg
ricardo souza
2024-06-26 08-06-07
Ajitesh Mahapatra

Hi,

I have used the below Javascript,

window.history.pushState(null, "", window.location.href);

window.onpopstate = function (event) {

    window.history.pushState(null, "", window.location.href);

    var originalTitle = document.title;

    document.title = "";

    document.title = originalTitle;

    window.location.reload();

};

Suggestions:

- Use this code at javascript tool in OnReady Event action. (Don't use the javascript in any Client/Server actions or at Global scripts, use at OnReady event action.)

- If you want any condition according to which you want to restrict the browser you can do that before calling the javascript in OnReady action. 

- This javascript will restrict the back button of the browser. Used window.location.reload() so that the page reloads.

Please try if it can help you as well.

Thanks

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.