Chrome forces page refresh on window.history.back()

Question

I'm working on a single page form without frameworks. An easy single page without using frameworks. I am using a hash system with history.pushState, so depending on the div clicked, I assign a different hash. For example:

        var stateObj = { id: "file" };


        $(document).on('click', "#foo", function () {
                                showTemplate(templates_main, data);
                                history.pushState(stateObj, "page 1", '#foo')

        }),

        $(document).on('click', "#faa", function () {
                                showTemplate(templates_main, data);
                                history.pushState(stateObj, "page 1", '#faa')

        }),

Before submitting the form, pushState will have the same behaviour on both browsers.

• The page URL == index.html
• Click #foo, URL == index.html#foo
• Click #faa URL == index.html#faa
• Click back URL should be index.html#foo

After submitting the form, a new page is created using perl. If the options given are wrong, the page created will contain a button which fires the window.history.back() to try again.

This works for Firefox which also returns all the data imput as you click back.

The problem starts with Chrome, as after submitting the form and pressing the back button, I can see that Chrome goes first to index.html#foo and then automatically refreshes the page, resulting in URL == index.html.

I know that if you want to make Firefox behave like Chrome or IE, you may add onunload="" to the body. But is there something I can add to the body or anything I can do to make Chrome behave like Firefox and avoid reloading the page?

• Why does Chrome do that?
• How can I avoid the page refresh? or
• How to change the page to its original state when history.back() was executed, after the page is reloaded?

Something like:

onclick="window.location.href=document.history.length(-1)"

Thanks,

Answer 1

对我来说，Chrome仅在完成文件上传后触发history.back（）时强制页面刷新。