无休止滚动不同网站的多个页面答案

【问题标题】：Endless scrolling with multiple pages of different websites无休止滚动不同网站的多个页面
【发布时间】：2021-07-04 18:36:17
【问题描述】：

我正在尝试创建类似于无限滚动机制的东西，该机制适用于具有非静态内容（可以是任何内容）的不同网站的多个（至少两个）页面。这意味着将页面 A (foo.com) 一直向下滚动到底部，然后页面 B (bar.net) 紧随其后。

我知道有很多解决方案可以无限滚动一个网站，在向下滚动页面时添加越来越多的元素/内容。所有这些都不适用于一个以上网站的内容。

我也知道可以用 iframe 做类似的事情，但是很多网站在 iframe 中不能很好地工作。

我考虑过用我想附加的页面的 HTML 标签来扩展 DOM，然后我会在一个文档中有多个浏览器可能能够解释的 HTML 标签，但这不是 HTML 标准的一部分每个文档只定义一个 html 标签。 JS/CSS 也会混淆 ;)

我是否必须开发具有多个窗口对象的新浏览器，或者是否有可能在现有浏览器中使用现有网络技术创建我想要的无限滚动？

【问题讨论】：

标签： javascript html css browser

【解决方案1】：

如果您要包含的页面是静态的，您可以在后端创建一个函数来获取您需要的页面内容：

getContentForPage(string $url) {
    $data = file_get_contents($url);
    echo($data);
    die();
}

然后当用户到达页面末尾时，通过前端的 ajax 获取内容（这可能很有用：javascript: detect scroll end）：

getContentForPage(url) {
    $(document).ready(function() {
        $.ajax({
            url: 'https://yourfunction',
            dataType: 'json',
            data: {url: url},
            success: function(content) {
                         $('body').append(content);
                     },

        });
    });
}

并将获取的内容附加到正文的底部。（你可以在添加之前稍微调整一下内容）。

希望对你有帮助。

【讨论】：

感谢您的输入。这与静态页面无关。我编辑了问题以使其更清楚。