Prevent Android Back Button Using Javascript

Question

I have a simple HTML app with CSS and Javascript. I want to prevent the users from pressing the back button. I have achieved it using JavaScript and it works fine. My problem is that it doesn't work on Android devices, and when users press the "Hardware" back button on their devices, they get redirected back to the previous page.

I've gone all over SO but haven't found any answers. Could anyone point me in the right direction?

I'm not using Cordova, ionic, etc. It's just a simple HTML web page.

have you found the solution? – paul cheung Aug 03 '18 at 09:13 — paul cheung, Aug 03 '18 at 09:13
@paulcheung yes, I added the answer – Farzad Soltani Aug 05 '18 at 08:40 — Farzad Soltani, Aug 05 '18 at 08:40

Farzad Soltani · Accepted Answer · 2020-07-06T09:09:55.837

6

This is the answer I came across :

history.pushState(null, null, window.top.location.pathname + window.top.location.search);
        window.addEventListener('popstate', (e) => {
            e.preventDefault();
            // Insert Your Logic Here, You Can Do Whatever You Want
            history.pushState(null, null, window.top.location.pathname + window.top.location.search);
        });

edited Jul 06 '20 at 09:09

answered Aug 05 '18 at 08:40

Farzad Soltani

377
7
19

it helped. @Farzad Soltani. – paul cheung Aug 06 '18 at 05:59
This only worked for me when I put the event parameter in there and put `e.preventDefault();` before the `history.pushState` – Luke Jul 05 '20 at 08:57

score 3 · Answer 2 · answered Jul 05 '20 at 08:58

To elaborate on @Farzad Soltani's answer. This worked for me on android with e.preventDefault():

history.pushState(null, null, window.top.location.pathname + window.top.location.search);
        window.addEventListener('popstate', (e) => {
            e.preventDefault();
            history.pushState(null, null, window.top.location.pathname + window.top.location.search);
        });

score 1 · Answer 3 · answered Aug 05 '18 at 10:13

1

Here is a Simple solution :

history.pushState(null, null, location.href);
window.onpopstate = function () {
    history.go(1);
};

You can also replace the history.go(1); part with any code that needs to be executed when the button is pressed.

answered Aug 05 '18 at 10:13

Steev James

2,396
4
18
30

score -2 · Answer 4 · answered Mar 12 '23 at 21:23

If your idea to prevent the back action because you opened a modal you can do this. If not you can adapt.

Add this function to a script in index.html

function AddModalToHistory(url) {
        window.history.pushState("SaraivaForm.Client", "Modal", url);
    }

Inject JsRuntime on Blazor component

@inject IJSRuntime JsRuntime

Call from code once the modal is opened

protected override async Task OnInitializedAsync()
{
    await JsRuntime.InvokeAsync<string>("AddModalToHistory");
}

Prevent Android Back Button Using Javascript

4 Answers4