Forum Academy Marketplace Showcase Pricing Features

One way to "disable" browser back button

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:

  1. Install the Toolbox plugin, which allows you to Run Javascript in a workflow
  2. Create a workflow “When Page is Loaded” (or if you already have one then use that)
  3. 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.

2 Likes

Great ! it works perfectly !

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

Hi Diego -

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

Joey