History API does not apply history changes until the user performs any actions on the page

Question

There is a site page on which you need to implement routing using the history of API.

This page can be accessed as follows:

transition from a blank page,
transition from another page (external / internal),
return using the browser button Back,
routing the page inside using the open / close buttons.

Routing example: site.com/typical-page/routing-page-level1/routing-page-level2/routing-page-level3/other-typical-page

typical-page, other-typical-page - pages without routing
routing-page-level1, routing-page-level2, routing-page-level3 - a page with routing.

Inside the page it works fine I go to the page with routing:
site.com/typical-page/routing-page-level1/

I click on the button level2, go to:
site.com/typical-page/routing-page-level1/routing-page-level2/

level3, go to:
site.com/typical-page/routing-page-level1/routing-page-level2/routing-page-level3

I click Close on the page or the BACK button in the browser I go
site.com/typical-page/routing-page-level1/routing-page-level2/

I click Close again on the page or the BACK button in the browser I go
site.com/typical-page/routing-page-level1/

If I immediately go to site.com/typical-page/routing-page-level1/routing-page-level2/routing-page-level3 from a blank page, and then click BACK in the browser, I return to a blank page.

But, if from a blank page I immediately go to site.com/typical-page/routing-page-level1/routing-page-level2/routing-page-level3, then I click anywhere on the page and then click BACK in the browser , then I’m going to site.com/typical-page/routing-page-level1/routing-page-level2, if again, then at site.com/typical-page/routing-page-level1.

I understand that the browser does not apply history changes until the user performs any actions on the page. For example, click.

How can this be avoided?

This article was used as a sample JS - window.history - Delete a state

This is pseudo code.

let guideHistory = ['init'];
let flag;
history.pushState({state: '/guide'}, '', '/guide');


// User came from blank page
if (!history.state) {
    setTimeout(() => {
        flag = true;
        history.replaceState({state: '/routing-page-level1'}, '', '/routing-page-level1');
        level2.trigger('click');
    }, 20);
}


// User came from other page
if (history.state) {
    flag = true;
    level2Click(level2);
}


level2.on('click', level2Click);
level3.on('click', level3Click);


function level2Click() {
    addHistory(level2.attr("data-path"));

    if (flag)) {
        setTimeout(() => {
            level3.trigger('click');
        }, 30) ;
    }


    function addHistory(historyState, historyPath) {
        if (guideHistory[0] === 'init'){
            guideHistory.pop();
        }

        if (historyPath) {
            guideHistory.push('/routing-page-level1' + '/' + historyPath);
        }
        else {
            guideHistory.push('/routing-page-level1');
        }

        history.replaceState({state: historyState}, '', '/routing-page-level1/' + historyState);
    }
}


function level3Click(event) {
     setTimeout(() => {
         addHistory(level3, level2));
     }, 0);
}


window.onpopstate = function() {
    if (guideHistory[0] !== 'init') {
        if (!guideHistory.length) {
            history.go(-1);
        }

        else {
            pushHistory(guideHistory);

            function pushHistory(guideHistory) {
                let pop = guideHistory.pop();
                history.pushState({state: pop}, '', pop);
            }
        }
    }
};

Thanks!

And so what is your question, actually ? For example - why the click event is handled by the `level2Click()` function ? Or why the mentioned function is replacing the current state in the history rather than pushing a new state ? The history is a stack - you can push to the stack, pop from the stack or update the value at the top of the stack. No other operations are possible. — IVO GELOV, Nov 29 '19 at 18:29
I replace, but do not push state in the history, so that the user is always in the current state, (the FORWARD button was always disabled. You can only move backward as in mobile phones). The history is a stack - I understand this. But when you go to this page, changes in the history (push, replace) occur only after user activity on that page. — Мастеров Владимир, Dec 02 '19 at 07:17
Well, probably this could be by design, e.g. how this particular piece of code works. You can test this hypothesis if you try to manipulate the history immediately after the page becomes active, without waiting for a click event. Also, keep in mind that if the stack has only 1 item and you replace its value over and over - there will be no BACK button. The BACK button will show up only when the history stack contains more than 1 item. — IVO GELOV, Dec 02 '19 at 08:12

History API does not apply history changes until the user performs any actions on the page

0 Answers0