I’m testing an application in Chrome, Edge, FF, IE, O, and Safari. A particular page generates up to 5 iframes loading up to the 5 most recent color maps of a measure in each. Each color map has many image map links. Consider the following browser Back button behaviors before and after a browser Refresh, after I take some links in any of the iframes.
browser Back button behavior before Refresh - the links taken in all iframes are combined into the history of the page the iframes are embedded in. Each Back button results in all 6 browsers stepping back through that combined history in a ‘last link taken first’ order, which is what I would expect.
browser Refresh resets the page and all embedded iframes to their entry state in all 6 browsers, which is what I would expect.
browser Back button behavior after Refresh - In Edge and IE, the next Back button after the Refresh exits the UI, which is what I expect. However, in Chrome, FF, O, and Safari, the next Back button(s) after the Refresh step back through the combined history of the previous session of the page BEFORE the Refresh. I reproduced the same behavior with object elements instead of iframes. I’ve even generated random iframe NAMES and IDs with the same result.
Here is a link to show the behavior in question loading off my home Apache server. I hope this does not get flagged as spam. It is a good demonstration of what I’m talking about in this post. This work is taking place on my Apache home server. It shows 6 iframes, 5 of which are the latest 5 years of test color maps for a measure in Kentucky counties.
Copy the link and try it in Edge or IE and Chrome, FF, O, or Safari. Take some of the links in each iframe containing a geographical year. Then do the 3 steps above.
Which approach to handling page history after a refresh do you think is correct? I think the Edge/IE approach is. As UI designers, what do you think? Any opinions or help will be appreciated.