I have the following code in my page to submit the form on the page automatically when the DOM is ready:

$(function () {
    $('form').submit();
});

However, on the next page if the user clicks back on their browser it goes back to the page before this one rather than the page with this code on (with Chrome/IE anyway). i.e. the page with the form on is missing in the browser history.

This is great, although I wondered is this something all modern browsers now do? I am looking for an answer that cites official sources such as from internet standards documents or from browser vendors that state the mechanism they have implemented.

This appears to only happen if I call the submit() function in the DOM ready or Window load events.

e.g. this code will show the form page in browser history after the page is clicked (back/forward):-

document.addEventListener('click', function () { document.forms[0].submit(); }, false);

the following snippets won't:-

document.addEventListener('DOMContentLoaded', function () { document.forms[0].submit(); }, false);
window.addEventListener('load', function() { document.forms[0].submit(); }, false);
window.onload = function () { document.forms[0].submit(); };

I have the following code in my page to submit the form on the page automatically when the DOM is ready:

$(function () {
    $('form').submit();
});

However, on the next page if the user clicks back on their browser it goes back to the page before this one rather than the page with this code on (with Chrome/IE anyway). i.e. the page with the form on is missing in the browser history.

This is great, although I wondered is this something all modern browsers now do? I am looking for an answer that cites official sources such as from internet standards documents or from browser vendors that state the mechanism they have implemented.

This appears to only happen if I call the submit() function in the DOM ready or Window load events.

e.g. this code will show the form page in browser history after the page is clicked (back/forward):-

document.addEventListener('click', function () { document.forms[0].submit(); }, false);

the following snippets won't:-

document.addEventListener('DOMContentLoaded', function () { document.forms[0].submit(); }, false);
window.addEventListener('load', function() { document.forms[0].submit(); }, false);
window.onload = function () { document.forms[0].submit(); };

• javascript
• jquery
• html
• forms
• browser-history

• 1 Yes your right.. if you try to submit the form on dom ready then it will not be added in history if you navigate using back button.. stackoverflow./questions/158319/… this might help please check.. – Amit Commented Jul 9, 2014 at 12:47
• 3 Just like North Korea, you can manipulate history as needed: html5doctor./history-api – logic-unit Commented Jul 9, 2014 at 13:54
• not only in domReady... even in runtime script and $(window).load. – Frogmouth Commented Jul 9, 2014 at 14:20
• @amit Thanks, but that's not quite the same. – SilverlightFox Commented Jul 9, 2014 at 14:25
• |"Just like North Korea, you can manipulate history" LOL – divyaSharma Commented Aug 13, 2014 at 7:00

4 Answers 4

I've dealt with this before. I did not want the back button to take the user back to previous page. Using onbeforeunload solved the issue for me...

But your issue is related to the following concepts

• Browsing Context
• Session History
• Replacement Enabled (flag)

1. A "Browsing Context" is an environment in which "Document" objects are presented to the user.

2. The sequence of "Document"s in a "Browsing Context" is its "Session History". The "Session History" lists these "Document"s as flat entries.

3. "Replacement Enabled" es into effect when we propagate from one "Document" to another in the "Session History". If the traversal was initiated with "Replacement Enabled", the entry immediately before the specified entry (in the "Session History") is removed.

Note A tab or window in a Web browser typically contains a browsing context, as does an iframe or frames in a frameset.

Logically thinking, by calling any of these

document.addEventListener( 'DOMContentLoaded', function() {document.forms[0].submit();}, false );
window.addEventListener( 'load', function() {document.forms[0].submit();}, false );
window.onload = function() {document.forms[0].submit();};

you are suggesting the browser to perform #3, because what those calls mean is that propagate away from the page as soon as it loads. Even to me that code is obviously :) asking to be cleared off from the "Session History".

Further reading...

• onbeforeunload
• browsers
• browsing-context
• unloading-documents
• replacement-enabled

Since this code leaves the page in the history when responding to the click event:-

document.addEventListener('click', function () { document.forms[0].submit(); }, false);

and the following pieces of code do not leave the page in history (DOMContentLoaded, and window onload events):-

document.addEventListener('DOMContentLoaded', function () { document.forms[0].submit(); }, false);
window.addEventListener('load', function() { document.forms[0].submit(); }, false);
window.onload = function () { document.forms[0].submit(); };

it can be assumed that modern browsers do not record a navigation history for page navigation that occurs within the window load or document ready handlers.

When the user hits the back button, the browser shows the cached copy of the page. Form submit doesn't cache the page therefore it doesn't show up in your history.

Yes, redirecting from an onload event handler causes the new URL to replace the one you leave in the history (and thus doesn't add a useless entry). But that's not the only trigger for that replacement, it may also be caused by any location change occurring fast enough, this delay being designed to avoid polluting the history in case of JavaScript based re-directions.

It is very hard to find any specification on that topic but on Firefox this delay seems to be 15 seconds. Here's a mention of this delay in bugzilla from one of the moz developers :

Mozilla uses a threshold of 15 seconds to decide if a page should stay in history or not. If a site uses and redirects to another site with in 15 seconds OR redirects to another page in onLoadHandler() etc ..., the redirected page will replace (and thereby eliminating) the redirecting page from history. If the redirection happens after 15 seconds, the redirecting page stays in history.

One may argue about the time limit. But this is just something we thought was a reasonable number