Imagine this scenario
A visitor lands on Page A, clicks through to Page B, and then engages with a link that triggers a modal (code provided below)
<a href="mycontent.html" data-target="#modal_xl" data-toggle="modal" data-backdrop="static">Click me</a>
Fills out a form, submits it, the modal closes, and Page B gets refreshed.
The issue at hand
In Firefox, upon hitting the back button, the user is taken back to Page A (as expected). The browser history would show Page B -> Page A.
However, in Chrome and Safari, pressing the back button directs them back to Page B once more. The browser history now displays Page B -> Page B -> Page A.
It appears that in Chrome and Safari, reloading the page or closing the modal counts as an additional visit to Page B. If the same form is submitted multiple times, users have to press the back button repeatedly to reach the previously expected page.
A potential workaround
I've implemented the following code snippet on Page B to address this issue
if(document.referrer == window.location.href) {
window.history.back();
}
This solution solves the problem for Chrome and Safari by taking the users back one step in their browsing history, directing them to Page A upon pressing the back button. However, in Firefox, it sends them all the way back to Page A since Firefox doesn't treat the modal as a distinct separate page visit, which isn't ideal.
While incorporating browser detection could address the Firefox dilemma, it's not the most elegant solution and may also trigger the browser's "forward history".
Is there a method to prevent the modal from affecting the browser's history?