Modifying JavaScript functions using JavaScript

If you often work on the JavaScript for the DHTML tasks, then there are good changes that you had wanted to modifying some of the existing built-in or third JavaScript functions. If you want to enhance the built-in JavaScript functions, then probably the best technique is closure. If you don’t already know about it, here is a good starting article:
http://www.coryhudson.com/blog/2007/02/07/modify-existing-javascript-functions/

If the function you want to modify is already written in the JavaScript, then you can either tweak the source file (if you can and have access for it), or you can change the required source at the run-time using the JavaScript. This is what I like about JavaScript, similar to many other interpreted languages, you can play with the existing source too. This becomes more easy and powerful with advance features like closure, currying, prototyping, etc.

Anyway, coming back to the point, you can easily get the source of the existing JavaScript functions as string and then can modify it. Here is a sample script demonstrating this concept:

1
2
3
4
5
6
7
8
9

function foo()
{
    return "foo it";
}
 
var orignalFunction = foo.toString();
var newFunction = orignalFunction.replace("foo it", "do it");
eval(newFunction);
alert(foo());

As many of you have guessed, the alert above will display the text “do it” instead of “foot it”. OK, now we know how we can modify the existing function at run-time, but then the question is how we can use it and is it really of any help? The one place, where I find it very useful was during adding the Google “Enhance 404 pages” widget in the ASPX page.

This JavaScript based Google widget is designed to be placed on the custom “4o4” page of your site.  Read more about this:
https://www.google.com/webmasters/tools/enhance404?

Now when I added that JavaScript widget in the ASPX page, it failed because this JavaScript renders a form tag, but I already have one in the ASPX page (needed in all ASPX pages). As we can’t have nested forms (I would like to have this feature supported), it was failing. In such cases, I usually use the IFRAME to render the new content. It worked in this case too, but I see another problem and that’s the Google search results were opening in the same IFRAME. This was tricky to handle because the JavaScript for this is written by Google and is hosted on their server. Though I can re-write all this on my own, but it would be a time consuming task.

Looking at the JavaScript rendered by the Google widget, I found that a function named “ss” handles the redirection and it’s redirecting to “window.location” object. Okay, the fix is simple, if I can some how change this line to “parent.window.location”, my problem will be solved. The problem is that JavaScript source is hosted on the Google server and I can’t change it.

It’s time to take advantage of the interpreted language features, and by adding a custom script like following after the Google widget, my problem was solved.

1
2
3

// Set the parent window as the target redirect
var newRedirectFunction = ss.toString().replace('window.location', 'parent.window.location');
eval(newRedirectFunction);

That was simple and elegant. Long live JavaScript.

Tags: 404, Closure, Google, JavaScript, Widget

This entry was posted on Saturday, December 13th, 2008 at 7:45 pm and is filed under ASP.Net, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.