背景:在简书个人页搜索关键字查找相关文章时,若个人所写文章过多,需要不停下拉滚动条先将所有文章加载到当前页面才能搜索完整。否则搜索只在当前页面中进行,造成搜索不全。
打开F12,可以看到下拉滚动条或按pageDown时,如下的li会不断增加,本文要实现js定时器定时scroll来方便一次加载所有个人文章进当前页面(使用chrome)。将代码拷贝到F12打开的console页签,enter即可运行。等两分钟就好,控制台输出"completed count xxx"表示结束。运行期间可以浏览其他网页或做别的事,只要不关闭运行所在的浏览器就行。
代码如下:
//获取当前加载的data-note-id数(li的class)
function count() {
return document.getElementsByClassName("note-list")[0].getElementsByTagName("li").length;
}
//获取作者总文章数
function total() {
var s = document.getElementsByClassName("info")[0].getElementsByTagName("li")[2].getElementsByTagName("p")[0].innerHTML;
return parseInt(s, 10);
}
//定时执行
var tot = total();
var id = setInterval(action, 1500);
//定时器执行的函数
function action() {
window.scrollTo(0, window.scrollY+window.innerHeight*4);
var c = count();
if(c >= tot){
console.log("completed count: " + c);
clearInterval(id);
return;
}
console.log("current count: " + c);
}
参考链接:
https://blog.csdn.net/lck8989/article/details/80354784(js 异步转同步之Promise,并未用到,因为scrollTo放到Promise中并不像读文件操作放到Promise中那样有效,但也算学习了下)
https://www.cnblogs.com/purplefox2008/archive/2010/11/22/1884654.html
https://blog.csdn.net/lovelyelfpop/article/details/52471878
https://www.html5rocks.com/en/tutorials/security/content-security-policy/