Intercept Specific Calls in Javascript

Question

My site has a trusted third party Javascript library. At runtime, the library will append various other blocks of Javascript to the page.

I had an issue where one of the blocks of Javascript really messed up my page in IE. The problem is that the script was calling "document.body.appendChild" before the DOM was loaded. IE really doesn't like this.

So, is it possible to intercept all calls to "document.body.appendChild" so that I can filter out certain calls?

EDIT: I do not have access to the third party scripts.

Answer 1

If the DOM hasn't loaded yet (ie. body is not available) then the answer is probably no. You could try by creating a property with document.body.appendChild name which is a function, but I'm not very sure it'll work - or if it does, it might screw around with other things.

Your best bet would probably be to modify the JS script, or make it so that the specific script is only loaded after the DOM has been fully built. For example, you could write some JS code which dynamically loads the script by appending a new script tag into the document when the doc has finished loading.

Answer 2

Could you just "document.body.appendChild" the third party script after the page loads? Like so:

//assuming you can use jquery:    
$(document).ready(function(){
h = document.getElementsByTagName('head')[0];
var q = document.createElement('script');
q.src = 'http://trusted.com/library.js';
q.type = 'text/javascript';
q.id = "trustedjs";
h.appendChild(q);
});

Answer 3

From http://code.google.com/p/google-caja/

Caja allows websites to safely embed DHTML web applications from third parties, and enables rich interaction between the embedding page and the embedded applications.

and it uses a call interception mechanism

Since web applications make common use of browser APIs, e.g. the DOM APIs, that give a huge amount of control over the web page, Caja provides tamed APIs that virtualize portions of the DOM. A containing page can set up the embedding application's environment so that the embedded application thinks it is interacting with the DOM of a full page, but is in fact only manipulating a bounded portion of the containing page via a mechanism called virtual iframes.

There's info on that same page about how to contact the team and get started.