Turbo Router, page:loaded, and back button

Need Help
#1

Sorry if I am being a pest. I noticed in my testing that when I use the back button with page:loaded it is calling multiple events. I am getting full refresh logged 120 times after clicking the back button 4 times.

Tested it like this between two pages. This script is living in the header of the layout.

<!DOCTYPE html>
<html>
<head>
    <title>{{ this.page.meta_title | default('Testing') }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="turbo-visit-control" content="enable" />
    <script>
        console.log("register");
        let count = 0;
        addEventListener('page:loaded', function() {            
            console.log("full refresh - " + count);
            count++;
        });
    </script>
</head>
<body>
    {% page %}
</body>
{% framework turbo %}
{% placeholder scripts %}
</html>

image
image1311×611 3.54 KB

#2

This is expected behavior and is an event listener accumulation issue. Each time Turbo navigates (including back button), your script re-executes and registers another page:loaded listener. The old listeners aren’t removed, so they stack up.

After a few navigations you have dozens of listeners, and when the event fires, they all execute.

The fix is to guard against re-registration:

if (!window._pageLoadedRegistered) {
    window._pageLoadedRegistered = true;
    addEventListener('page:loaded', function() {            
        console.log("full refresh");
    });
}

Or use { once: true } if you only need it to fire once per page load.

#3

Thanks, that makes sense and why I asked.