javascript - 如何用js/jquery一个接一个地加载html页面？

Question

假设我有 4 个 html 页面，比如 a.html、b.html、c.html 和 d.html。

最初，当我运行程序时，我加载了 a.html，当用户滚动到顶部并且如果它已经在顶部时，警报会显示“您已到达页面顶部，这是第一页”。

现在，当我向下滚动时，使用检测页面结束的 js 方式，当我到达页面底部时，我调用下一页并加载下一页 b.html。

这样，当它到达 d.html 并且您向下滚动到页面末尾时，它会提醒您“您已到达页面末尾，这是最后一页”。

当我向上滚动时使用相同的方法，当它到达页面顶部时，js将调用上一页函数并加载上一页。在这里，我将首先加载上一页底部。这也很好用(但没有连续性)

这个策略运作良好。但我需要一种机制来连续加载这些 html 页面，以便它能够以整洁的方式加载网页，就像我在文档查看器中打开 pdf 文档一样。

就像下一个和上一个页面交换是平滑的而不是将其作为一个新页面打开(这在上一个页面调用的情况下非常重要)。

在 jquery 或 java 脚本中是否有任何用于此功能的库？

有人请帮忙。我为这个功能搜索了很多

Answer 1

如果要将 HTML 文档加载到网页上，可以使用 jQuery 的 .load() 函数。

语法:

// $ is the same as jQuery
$(element).load(documentURL);

此处，.load() 从文档中获取 HTML 并将此 HTML 放入指定的元素中。要获取 HTML 文档中的特定元素，只需像在 CSS 中一样定位它们。如果您想从文档中获取标题:

$("#result").load("myDocument.html header");

记住:如果您在加载 DOM 页面时加载 HTML，请使用 $(document).ready();。这是一个例子:

$(document).ready(function() {
    $("#result").load("myDoc.html body main");
});