One way to "disable" browser back button

joeyg · 2020-10-15T20:56:00.835Z

I have a single page app and my users have complained that they are taken out of the app when they hit the browser back button. Sometimes this causes them to lose work, so it’s a pain. There have been some posts on this in the forum, but I wasn’t able to find a simple solution to this problem so I’m posting a potential solution here.

I stumbled across some simple javascript that detects the browser button being pressed and then immediately pushes forward (to the same page they were on) using the history. From a user standpoint, it behaves like the back button is inactive.

To get it to work in Bubble:

Install the Toolbox plugin, which allows you to Run Javascript in a workflow
Create a workflow “When Page is Loaded” (or if you already have one then use that)
Add a step in the workflow to Run Javascript. Paste this in the script window:

history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () => history.forward();

It’s sort of a hacky workaround, but it gets me mostly what I want in both Chrome and Edge. Haven’t tried other browsers. Some posts I found say this is not advised, that you shouldn’t mess with the browser functions, so do this at your own risk I guess :> It’s easy to try and test if you want to give it a shot.

deskapad.app · 2020-11-18T10:45:39.553Z

Great ! it works perfectly !

diegoscarvalho · 2021-06-17T21:58:36.657Z

Hi @joeyg. It works perfectly. Is it possible to revert it and use with conditions, like only “if this popup is visible”?

I realized when I use this code, the browser back button “dies” forever lol

Thanks in advance

joeyg · 2021-06-18T17:49:09.997Z

Hi Diego -

What is your use case and what are you trying to accomplish?

Joey

diegoscarvalho · 2021-08-09T00:39:54.843Z

Hi @joeyg . I want to choose when to “disable” the back button, like a condition state: if the Floating Group A is visible, the back button is disabled.

Thank you

chris.williamson1996 · 2021-08-09T02:36:05.537Z

Alternatively you could just use a slug structure using go to page (same page as single page app) that sends a param to navigate single page app.

So you technically switch pages so back and forward button works fully on single page apps.

Dexx · 2023-04-15T23:33:13.444Z

@chris.williamson1996 I’m very interested in this concept. Could you elaborate a bit more on how I could accomplish this?

ajlowndes · 2023-05-08T13:39:29.280Z

me too. Please elaborate