我目前正在开发一个网站，主页上显示最新的10篇博客文章。当我向下滚动并且快到屏幕上最后一个项目时，会自动加载另外10篇博客文章，以此类推（这就是无限滚动的功能）。
如果用户单击任何博客条目，则会跳转到另一页以显示有关该博客条目的详细信息。当用户单击返回按钮时，将返回显示条目的主页。
请注意，主页使用Ajax加载数据。
假设以下场景：
1. 用户进入网站，并加载了1到10个条目（通过Ajax）。 2. 用户向下滚动，接下来的10个条目，即第11到20个条目，也通过Ajax加载。请注意，页面现在显示了1到20个条目。 3. 用户继续向下滚动，现在加载了21到30个条目，总共显示了1到30个博客条目。 4. 用户单击25号条目，将显示25号条目的页面。 5. 用户单击返回按钮，所有1到30个条目都将显示出来。
现在，如果用户使用FireFox，Opera或Safari，并执行步骤5（即单击返回按钮返回主页），则博客条目将仅在屏幕上显示，而不重新加载。然而，在IE和Chrome中，当用户单击返回按钮时，页面会重新加载，只会显示1到10项。
我不喜欢IE和Chrome的行为。用户应该看到1到30项。如何确保所有浏览器都像FireFox一样？
谢谢。
更新：
这是我正在使用的代码
首先，这是我的html
如果用户单击任何博客条目，则会跳转到另一页以显示有关该博客条目的详细信息。当用户单击返回按钮时，将返回显示条目的主页。
请注意，主页使用Ajax加载数据。
假设以下场景：
1. 用户进入网站，并加载了1到10个条目（通过Ajax）。 2. 用户向下滚动，接下来的10个条目，即第11到20个条目，也通过Ajax加载。请注意，页面现在显示了1到20个条目。 3. 用户继续向下滚动，现在加载了21到30个条目，总共显示了1到30个博客条目。 4. 用户单击25号条目，将显示25号条目的页面。 5. 用户单击返回按钮，所有1到30个条目都将显示出来。
现在，如果用户使用FireFox，Opera或Safari，并执行步骤5（即单击返回按钮返回主页），则博客条目将仅在屏幕上显示，而不重新加载。然而，在IE和Chrome中，当用户单击返回按钮时，页面会重新加载，只会显示1到10项。
我不喜欢IE和Chrome的行为。用户应该看到1到30项。如何确保所有浏览器都像FireFox一样？
谢谢。
更新：
这是我正在使用的代码
首先，这是我的html
<html>
<body>
<section id="content">
<section id="articles">
<!-- This section is filled by jQuery/Ajax -->
</section>
<section id="loading-spinner">
<img src="ajax-loader.gif" />
</section>
</section>
</body>
</html>
这是我的jQuery代码
/**
*
* This file uses a bunch of programming concepts, but the most important one is ensuring ajax calls run as a critical section
* ... (this means if ajax is already called, then another instance of JavaScript cannot get into the critical section)
*
* .. For more details, please read: https://dev59.com/133aa4cB1Zd3GeqPZSmh
*
*/
load_more_posts = function () {
// If we almost reach the bottom of the document, then load more posts
if ( jQuery(window).scrollTop() >= jQuery(document).height() - jQuery(window).height() - 300) {
// If the value of the promise is not pending, then we can call the load_posts function (the load_posts function will change the status to pending when it is executing the ajax request)
if (ajax_status.state() !== "pending") {
load_posts();
}
}
};
function load_posts() {
ajax_status = jQuery.ajax({
type: 'post',
dataType: 'json',
beforeSend: function(xhr) {
if(jQuery.data(document.body, 'load_page') == false) {
xhr.abort();
}
else {
// Show the spinner
jQuery('#loading-spinner').visible();
}
},
url: '../link/to/get_poasts.php',
data: {
action: 'load_posts',
js_query_data: query_data,
js_page: jQuery.data(document.body, 'page_to_load')
},
success: function (response) {
if (response.isSuccessful) {
var number_of_post_items = response.posts_array.length;
for (var i = 0; i < number_of_post_items; i++) {
// If the item is already returned from the database and posted. then we skip it, otherwise, keep insert a new record
if (jQuery('#articles').find('#article-' + response.posts_array[i].post_id).length == 0) {
// Add 'article'
jQuery('#articles').append('<article id="article-' + response.posts_array[i].post_id + '"></article>');
// More code here to add details about each article, such as title, excerpt...etc.
}
}
// Increase the value of the page to load by 1, and save it.
page = jQuery.data(document.body, "page_to_load");
page = page + 1;
jQuery.data(document.body, "page_to_load", page);
jQuery(window).on('scroll', load_more_posts);
}
else {
// Display error message
jQuery('#articles').append('<div>' + response.message + '</div>');
// Make sure no further AJAX requests are made
jQuery.data(document.body, 'load_page', false);
}
}
}).always(function() {
// Hide the spinner
jQuery('#loading-spinner').invisible();
});
return ajax_status;
}
// Create a new promise. This will be used to ensure that no two calls hit the critical section at the same time
// ... (the critical section in this case is the time when we retrieve data from the database. We only want one call at a time)
var ajax_status = new jQuery.Deferred();
jQuery(document).ready(function() {
// Hide the loading spinner first
jQuery('#loading-spinner').invisible();
// We resolve the promise, making sure it is ready (this is an intial state)
ajax_status.resolve();
// Initial values that are used
jQuery.data(document.body, 'page_to_load', 1);
// This parameter is used to stop loading pages when no more items are available to be displayed
jQuery.data(document.body, 'load_page', true);
// Initial loading of poasts
load_posts();
// Enable on scrolling to load more pasts (to allow infinite scrolling)
jQuery(window).on('scroll', load_more_posts);
});