Overriding built-in functions

I need to have control over the way in which 3rd party javascript interacts with the web page. I've seen this sorta thing being done before:

document.write = function(toWrite) {
// Do my own thing
}

Code (markup):

And I was wondering if that will work in all browsers and with all functions?


Additionally, I need to filter assignments as well as just function calls, e.g.

window.location = 'http://www.someplaceelse.com/';

Code (markup):

Is this even possible (without editing the code itself) and could anyone point me in the right direction?

Thanks a lot for any assistance, much appreciated.

 

1. Yeah, it should.
2. Don't really follow you.

 

Thanks for the reply.

For the second question, it's the same as the first but the 'override' is on the assignment operation instead of a function call.

For example, to change the behaviour of document.write(), you could wrap the argument in your own function:

document.write(myWrapper('blah blah blah'));

Code (markup):

But obviously just changing the document.write() function itself is a lot easier:

document.write = myWrapper;

Code (markup):

The problem is now HTML can also be inserted by setting the .innerHTML property:

someElement.innerHTML = 'Hello';

Code (markup):

And again, you could wrap the value in another function:

someElement.innerHTML = myWrapper('Hello');

Code (markup):

I'm looking for some way to achieve the effect of the last example without actually having to run expensive regexes to insert that call to the 'wrapper' function.

You can get control of anything passed to a function by overriding the function with your own custom function. I need that element of control when the operation is not a function call like document.write() but setting a property like myImage.src = 'something', myDiv.innerHTML = 'hi', etc.

Hope that's clearer.

 

I feel like an idiot but I really don't follow. What is it exactly you want to do?

document.write is a function, while .innerHTML is just a property, which can be read and set.

document.write and .innerHTML only take strings so if you are pointing it to a function make sure that the function's return value is a string.

 

Thanks but I understand the different between properties and functions. I want to run my own code when someone edits a property (or calls a function).

I have my javascript inserted at the top of the page. External javascript which I have no control over runs afterwards. I need to 'filter' the behaviour of that 3rd party javascript by limiting how it interacts with the webpage. The easy part is overriding the document.write(), window.open(), etc. functions but there's also all the properties that can be edited, like innerHTML, src, etc.

I need to achieve the effect of replacing:
someElement.innerHTML = 'Hello';

with
someElement.innerHTML = myWrapper('Hello');

but without actually doing that expensive regex search/replace.


I've been searching for a while and it seems to involve a __defineSetter__ method. It might not be possible and probably isn't cross-browser compatible.

 

Okay, now I see what you are trying to do.

I think your best bet would be to put the JavaScript in an IFrame or sandbox it using another method.

I've searched for a way to change innerHTML but I really wasn't successful.

You can change the element object from the prototype but it didn't work when i tried to change .innerHTML.

Node.prototype.innerHTML setter = function(){}...