Painstakingly, I have a page that is exceeding the character limit on IE11. I did a substring operation to get an exact character count since I couldn't find it anywhere. The answer is that (at least on IE11) 524282 characters are allowed to be passed to the pushState/replaceState.
I handled that via the following code:
function pushState(data, title, url) {
if (data.length > 524282) {
//can't push the data to the History API--pass null
history.pushState(null, title, url);
history.replaceState(null, title, url);
}
else {
history.pushState(data, title, url);
history.replaceState(data, title, url);
}
document.title = title;
}
I call beforeNavigate to save any current position information or state changes made by the user before loading the new content via an ajax request.
function beforeNavigate(){
if ($("#container").html().length <= 524282) {
//save current state to history before navigating via ajax
history.replaceState($("#container").html(), document.title, window.location.pathname);
}
}
Handle pushing the back and forward buttons by listening for popstate. If we passed a null value for data, then e.state will return null, and we need to load the stored url via an ajax request.
window.addEventListener('popstate', function (e) {
if (e.state!=null) {
$("#container").html(e.state);
}
else {
//load the partialpage into the container(a full html page is not returned by the ajax query for my site)
$.ajax({
url: location.href,
type: "GET",
success: function (data) {
$('#container').html(data);
}
});
}
});