Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Document ready form submission and browser history

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(); };
like image 578
SilverlightFox Avatar asked Jul 09 '14 11:07

SilverlightFox


Video Answer


2 Answers

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" comes 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
like image 79
Patt Mehta Avatar answered Sep 20 '22 17:09

Patt Mehta


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.

like image 26
SilverlightFox Avatar answered Sep 18 '22 17:09

SilverlightFox