【油猴脚本】纯 HTML 网页实现无限滚动的两个思路

最近写了个某看图网站的无限滚动脚本，这个网站的特点是服务端渲染，所以我们不能简单的通过访问接口然后把数据添加到页面中实现无限滚动。写之前参考了 https://greasyfork/scripts/5250 这个脚本，不过我的具体的实现方法和这个脚本完全不同。

对于服务端渲染的网页，实现无限滚动的基本思路是当滚动条滚动到页面底部时，获取下一页网页，然后提取获取到的网页的需要展示的内容的部分（比如图片 container），添加到页面中即可。（个人总结）

思路一：fetch

这里获取新页面我采用 fetch 的方法：

fetch('src').then(resp => resp.text()).then(text => {
    const dummyHTML = document.createElement('html');
    // 将获取到的 html 文本转成 DOM，以便查找元素
    dummyHTML.innerHTML = text;
    const container = dummyHTML.querySelector('选取图片container') ;
    document.querySelector('图片container').append(container);
})

获取数据并展示的基本思路如代码所示，实际操作中发现目标网站的 HTML 结构并不统一，所以选取 container 部分的 selector 需要视情况而定。

思路二：iframe + adoptNode

这个思路是上面列出的脚本的思路，兼容性好且代码量少些，推荐用这个方法。具体思路是：

const iframe = document.createElement('iframe');
iframe.src = src;
// 隐藏 iframe
iframe.style.height = 0;
iframe.style.width = 0;
// 把 iframe 添加到页面中，此时数据才开始加载
document.body.appendChild(iframe);
// 获取 iframe 的页面内容，功能和用 fetch 请求网页一样，但是更简单
const iframeContent = iframe.contentDocument

// document.adoptNode 的功能是删除原 DOM 子树并返回
// 这里就是删除原 iframe 的 container 并赋值给 container
const container = document.adoptNode(iframeContent.querySelector('图片container'));

// 把取出的 container 添加到当前页面
document.querySelector('.container').append(container);
iframe.remove()