On facebook.com
, where clicking on a 'link' appears to load a new page but (I believe) really just updates the existing page with new code, how can I know when that new content is fully loaded? For example, when you go to facebook.com
, you start at your 'home' page (the news feed). When you click on your name in the navbar you're taken to facebook.com/yourname
. However, it's not really a new page as a userscript doesn't get reloaded.
Because of this I wrote a little checker for my userscript that watches to see if the current href of the page has changed:
var startURL;
var curURL;
function main() {
startURL = window.location.href;
console.log("initial page. src: "+startURL);
setInterval(checkfornewpage, 500);
}
function checkfornewpage() {
curURL = window.location.href;
if(curURL != startURL) {
console.log("new page. src: "+curURL);
// do something
startURL = curURL;
}
}
main();
This works fine and notifies me when the page has changed. But when trying to then access elements within that new page I'm finding that what I get back is from the old page. I presume this is because even though the window.location.href
has changed, the rest of the page isn't fully loaded.
So then I decided to look for some content on the new page that I know will change to clue me into whether the new content is fully loaded. I chose the body
tag classes because the list of classes for body
is always different with each new page. I wrote a function to watch for this, but even after the body
class list has fully changed, my queries are still bringing up old page data.
I also tried calling load()
on the body
element, but that never fires.
I don't want to use some kind of generic setTimeout
that just waits long enough...I want to know precisely when it's loaded so I can move forward immediately. Ideas?