Discussions » Development

How do I access incrementally loaded data on Facebook?

§
Posted: 2018-02-23

How do I access incrementally loaded data on Facebook?

When a Facebook page first loads, I use document.documentElement.outerHTML to access the content. Once the page is loaded, a FB script downloads more content for it. I can see in the console my script running each time, but I can't figure out how to access just the new data that was downloaded. The above appears to show me the FB script doing the download, not the data it actually loaded and added to the original page.

wOxxOmMod
§
Posted: 2018-02-23

Use MutationObserver. There are many examples of using it.

§
Posted: 2018-02-23

Thank you, yes, I saw that, but TamperMonkey reruns my script every time more data is loaded anyway, so I was hoping I could just access the data somewhere at that point, rather than having to register a callback.

wOxxOmMod
§
Posted: 2018-02-23
Edited: 2018-02-23

Tampermonkey reruns the script only when the page is loaded for the first time or refreshed. Whereas MutationObserver is needed to detect the dynamic changes made without [re]loading of the page (so-called AJAX site or SPA site). Anyway, this is as far as I or anyone can guess without seeing the actual code you're using.

§
Posted: 2018-02-23

I am running Tampermonkey 4.5 on Chrome Version 63.0.3239.132 (Official Build) (64-bit). With a script containing only "console.log('It lives!');", hit F12, select Console, then visit http://facebook.com. You will see the script runs when the page first loads. If you then scroll down the page, every time it loads more data the script runs again.

wOxxOmMod
§
Posted: 2018-02-23
Edited: 2018-02-23

That's just because the site loads the content in iframes. Each iframe runs a new instance of your userscript. To keep only one instance running you can add @noframes in the metadata comment and use MutationObserver. Or you can try utilizing those spawned instances either individually or make them communicate with the main instance (e.g. via window.postMessage).

§
Posted: 2018-02-23
Edited: 2018-02-24

Thank you. That helps. With that information I was able to use this to differentiate between the two cases:

if (window.top === window.self) {
    console.log('main');
} else {
    console.log('iframe');
}

So if new content is loaded in iframes, and a new instance of my script is run for each iframe, how can each instance access the content in its iframe? In 'main' I just use "document.documentElement.outerHTML", but in an iframe that does not appear to actually contain the content. I can see what is there via "console.log(document);"

The instances do not need to communicate with each other.

Post reply

Sign in to post a reply.