I’m trying to hack a 3rd party JavaScript pop-up and I need to somehow register a callback so I can take action after it has loaded. I have code on my page that looks like this:
document.write('<' + 'script type="text/javascript"
src="https://www.notmydomain.com/include.js"><\/script>');
the source for include.js looks like this:
document.write('<' + 'script type="text/javascript"
src="https://www.notmydomain.com/anotherinclude.js?id=uniqueidicantreplicate"><\/script>');
anotherinclude.js writes some new divs to the DOM and I want to interact with them.
I’m not serving any of the .js files off my domain, I don’t have control over their contents, their contents may occasionally change, and there are some unique identifiers in the js that change every time the file is downloaded that I can’t spoof.
How do I register a callback so that I can take action when the new DOM elements are loaded?
Well, DOM2 and DOM4 provide some tools to listen for tree changes, and you could use these, but browser support is inconsistent. Specifically, I’m talking about the MutationEvent (DOM2) and MutationObserver (DOM4) interfaces. Besides limited browser support, you’ll need to watch out for performance issues with MutationEvent.