php可以抓取网页数据吗(看图网站的无限滚动脚本是怎么写出来的？(一))

　　php可以抓取网页数据吗(看图网站的无限滚动脚本是怎么写出来的？(一))

　　最近为一张图片网站写了一个无限滚动脚本。这个网站的特点是服务端渲染，所以我们不能简单的访问界面，给页面添加数据来实现无限滚动。我在写之前参考了这个脚本，但是我的具体实现方法和这个脚本完全不同。

　　对于服务端渲染的网页，实现无限滚动的基本思路是在滚动条滚动到页面底部时获取下一页，然后提取获取的网页中需要显示的部分（例如图像容器），并将其添加到页面上。（个人总结）

　　思路一：获取

　　这里我使用 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结构不统一，所以需要根据情况选择容器部分的选择器。

　　思路二：iframe + 采用节点

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

　　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()

　　总结iframe的作用和使用，主要注意src和contentDocument的作用，document.adoptNode的使用，fetch的使用

　　以上所有功能的详细文档可以在 mdn 上找到。

　　最后附上我花了几个小时写的G站无限滚动脚本的地址：

　　使用了更多新的 API，例如 URL 和 URLSearchParams。如果您有兴趣，请参考以下内容。