Javascript 如何检测页面是否已更新其内容?
我正在制作一个javascript代码,现在在控制台中使用它,但也许我以后会将其转换为一个扩展,它会在列表中的每个Facebook好友之外创建一个复选框:Javascript 如何检测页面是否已更新其内容?,javascript,facebook,console,Javascript,Facebook,Console,我正在制作一个javascript代码,现在在控制台中使用它,但也许我以后会将其转换为一个扩展,它会在列表中的每个Facebook好友之外创建一个复选框:[https://mobile.facebook.com/[您的用户名]/friends] 首先,脚本需要向下滚动,直到加载所有好友,然后附加复选框。问题是我不能告诉脚本什么时候停止滚动,唯一的方法是检测页面是否已经更新,我不知道怎么做 我尝试的 第一种方法 我的第一个想法是让用户能够选择要加载的朋友数量,然后加载朋友,直到输入的数量小于加载的
[https://mobile.facebook.com/[您的用户名]/friends]
首先,脚本需要向下滚动,直到加载所有好友,然后附加复选框。问题是我不能告诉脚本什么时候停止滚动,唯一的方法是检测页面是否已经更新,我不知道怎么做
我尝试的
第一种方法
我的第一个想法是让用户能够选择要加载的朋友数量,然后加载朋友,直到输入的数量小于加载的朋友数量
x = parseInt(prompt("How many friends you wanna load?"))
friends = document.querySelectorAll('._55wp._7om2._5pxa._8yo0[data-sigil="undoable-action"]')
scrolling = (n) => {
if(x < 0 || x > 5000) return console.log("invalide number");
console.log(n + " friends loaded")
if(n < x) {
setTimeout(function() {
window.scrollTo(0, 9999999);
friends = document.querySelectorAll('._55wp._7om2._5pxa._8yo0[data-sigil="undoable-action"]');
scrolling(friends.length)
}, 3000)
}
else
{
// create_checkboxes();
}
}
scrolling(friends.length)
x=parseInt(提示(“您要加载多少朋友?”)
friends=document.querySelectorAll('..\u 55wp.\u 7om2.\u 5pxa.\u 8yo0[data sigil=“undoable action”]”)
滚动=(n)=>{
如果(x<0 | | x>5000)返回控制台.log(“无效号码”);
console.log(n+“已加载好友”)
if(n
这种方法的问题是:用户可能会给出一个不合理的数字,例如,如果他有500个朋友,并且作为一个输入,他想加载600个朋友,这将是一个无限循环,因为数字friends.length
永远不会大于输入。脚本无法获取用户有多少朋友
第二种方法
我曾考虑指定迭代次数,根据我的计算,139次迭代足以加载5000个好友,但这有两个问题:
第一个很清楚的是,对于那些只有很少朋友的人来说,这是浪费时间。
第二,如果网速很慢,可能在等待3秒钟后(检查setTimeOut),朋友将不会被加载,因此,即使是139次迭代也可能不够,脚本也不会知道
所以我唯一的希望是一种检测Facebook是否做出了改变并加载了更多好友的方法,或者一种检测dom是否发生了改变的方法,或者甚至一种检测页面在点击页面后是否没有进行XHR的方法,后一种方式并不好,因为这可能只是因为互联网速度慢。你可以观察好友加载的div的高度。并继续向下滚动。在高度停止更改之前,您应该知道所有好友都已加载,没有其他可加载的内容。或者您可以将帐户中有多少好友存储在一个变量中,然后检查有多少好友div。如果friend div的计数达到friend count,您就可以开始了。在列表底部,Facebook维护了一个div,其类为
seeMoreFriends
,只有当有更多的朋友要加载时才会出现:
<div class="seeMoreFriends acw apl" id="m_more_friends" data-sigil="marea">
<div style="text-align:center;" class="centeredIndicator">
<div class="_2so _2sq _2ss img _50cg" data-animtype="1" id="u_6_11" data-sigil="m-loading-indicator-animate m-loading-indicator-root"></div>
</div>
</div>
const callback = (mutationList, observer) => {
const moreFriends = document.querySelector(".seeMoreFriends");
if (moreFriends) {
moreFriends.scrollIntoView();
} else {
observer.disconnect();
addCheckboxs();
}
}
const addCheckboxs = () => {
document.querySelectorAll('._55wp._7om2._5pxa._8yo0[data-sigil="undoable-action"]').forEach(item => {
item.insertAdjacentHTML('beforebegin', '<input type="checkbox">')
});
}
window.addEventListener("load", () => { // If running in the console the page would have already been loaded, so you can run the callback code directly
const loader = document.querySelector(".seeMoreFriends");
if (loader) { // if more friends to load
const obs = new MutationObserver(callback);
obs.observe(document.querySelector("._2pit"), {
childList: true
}); // listen to changes on the container div of the friends list (holding the seeMoreFriends div and friends list divs)
loader.scrollIntoView(); // kick off the loading, which will then trigger the mutation observer callback as the page continues to laod
} else {
addCheckboxs();
}
});