JavaScript How to push onto browser history

[ppowell777]

I am trying to push a URL onto a browser history to "prevent" the back button from going back to the previous page. Currently if the user clicks the back button, they simply go back to the Feedback page with the Submit button in a disabled state, which, while it prevents the user from flooding Feedback this way, it's not exactly the way I envisioned doing browser-side protection of flooding. I know that the back button can never be disabled on a browser, but I learned (or thought I learned) how to push onto the browser history using both history.pushState() and window.addEventListener('popstate', function() {}), and so wrote this, which, sadly, does absolutely nothing:

/**
 * Prevent the back browser button from practically working by pushing onto the browser history. Click
 * <a
 * href="https://stackoverflow.com/questions/19558038/how-to-restrict-the-user-not-go-to-previous-pages-by-clicking-the-browsers-back">
 * here </>
 * for more informtion
 */
$(document).ready(() => {
    const href = document.location.href.substring(0, document.location.href.lastIndexOf('/'));
    
    if (window.history != undefined && window.history != null && history.pushState != undefined && history.pushState != null) {
        window.addEventListener('load', () => {
            history.pushState({}, '', href + '/error.html?');
            window.addEventListener('popstate', () => {
                history.pushState({}, '', href + '/error.html#');
            });   
        });
    }
    
});

Does anyone have any ideas? Thanks

 

[Deleted member 2829]

What do you mean when you say it "does absolutely nothing" ? Have you debugged it to see which code gets executed and which doesn't ?

 

[ppowell777]

What do you mean when you say it "does absolutely nothing" ? Have you debugged it to see which code gets executed and which doesn't ?

Yes. I put in alert() statements within the code and proved that execution should take place, however, the history stack is unaffected; you are still able to go back to the previous page when there should be 1 more instance of the same URL that is in between your old previous page and where you are now. I am trying to stuff the history stack with instances of the URL to prevent the user from reaching, easily, the previous page

 

[Deleted member 2829]

Yes. I put in alert() statements within the code and proved that execution should take place, however, the history stack is unaffected; you are still able to go back to the previous page when there should be 1 more instance of the same URL that is in between your old previous page and where you are now. I am trying to stuff the history stack with instances of the URL to prevent the user from reaching, easily, the previous page

Ok, if you are sure all the code lines are executed as expected, I am out of ideas. It's just that there is a difference between 'doing absolutely nothing' and 'doing stuff but not producing the result I intended'.

 

[ppowell777]

Ok, if you are sure all the code lines are executed as expected, I am out of ideas. It's just that there is a difference between 'doing absolutely nothing' and 'doing stuff but not producing the result I intended'.

I rewrote the code:

/**
 * Prevent the back browser button from practically working by pushing onto the browser history. Click
 * <a
 * href="https://stackoverflow.com/questions/19558038/how-to-restrict-the-user-not-go-to-previous-pages-by-clicking-the-browsers-back">
 * here </>
 * for more informtion
 */

const href = document.location.href.substring(0, document.location.href.lastIndexOf('/'));
    
if (window.history != undefined && window.history != null && history.pushState != undefined && history.pushState != null) {
    window.addEventListener('load', () => {
           history.pushState({}, '', href + '/error.html?');
    });
    
}

$(document).ready(() => {
    const elem = document.createElement('div');
    elem.id = 'stuff';
    elem.innerHTML = 'blah';
    elem.classList.add('unseen');
    document.body.appendChild(elem);
    $('#stuff').click();
    
    window.addEventListener('popstate', () => {
        history.pushState({}, '', href + '/error.html#');
    });
})

At this point, if you click the back browser button, you still go back to the previous URL, but if you click anywhere on the page, then you click onto the back browser button, you wind up going to the correct previous URL, which should always be "/error.html#". So I am getting closer, but now you have to do a manual action to get the error page to work properly.