captured onclick function

Question

I have a page containing a series of tags like this

 <a class="IMG" href="#" onclick="openWin(this,'./photos/Snapshot_20100803.jpg');return false;"><img src="./photos/TN_Snapshot_20100803.jpg" alt="./photos/TN_Snapshot_20100803.jpg"/></a> 

openWin creates a window and displays the image when the thumb is clicked. That page also contains a 'next' button which calls a nextImage function in the parent page's script. nextImage hunts through the a class IMG tags and finds the following a tag with class IMG. But now I'm stuck. I've found the right a tag and have it in var z. I can get something ala

cmd = z.onclick;

if I display cmd with alert(cmd) I see something like this

function onclick(event) { openWin(this, "./photos/Snapshot_20100804.jpg"); return false; }

but I don't know what I have. I don't seem to be able to manipulate it as if it's a string using indexOf.

What kind of thing have I glommed onto?

How can I manipulate it as a string?

Is there some way I can define the function perhaps using eval() and execute it in the context of the tag in the page containing the a tag?

What I really want to do is click the a tag I found in the page.

Answer 1

If you have something like this:

var z = 'function onclick(event) { openWin(this,"./photos/Snapshot_20100804.jpg"); return false; }'

You can easily do this to execute the string contained in z:

var cmd = "("+z+")();"
eval(cmd);

You can test it HERE.

Answer 2

What you've found in z is the HTMLElement instance for the a element. When you look at its onclick property (which is a reflection of its onclick attribute), you get a Function instance. The toString of a Function instance, on nearly all implementations, returns a string containing a decompiled version of the function. However, this is non-standard behavior and is expressly disallowed in the latest JavaScript specification's new "strict" mode. In any case, decompiling the handler is not how you want to solve this problem. :-)

If you can modify the HTML, I'd recommend encoding the target picture as a data attribute, like this:

<a class="IMG" href="#" data-img='./photos/Snapshot_20100803.jpg' onclick="openWin(this,this.getAttribute('data-img'));return false;"><img src="./photos/TN_Snapshot_20100803.jpg" alt="./photos/TN_Snapshot_20100803.jpg"/></a>

Then, when dealing with the "next" feature, you can simply find the next a element (I'll call it nextLink) and do this:

openWin(nextLink, nextLink.getAttribute('data-img'));

Better yet, have the openWin function read the data-img attribute itself so that the HTML can just be:

<a class="IMG" href="#" data-img='./photos/Snapshot_20100803.jpg' onclick="openWin(this);return false;"><img src="./photos/TN_Snapshot_20100803.jpg" alt="./photos/TN_Snapshot_20100803.jpg"/></a>

...and the call to open the next one on nextLink just:

openWin(nextLink);

Shortens the page a bit, not having to repeat all of those this.getAttribute('data-img') bits.

Custom attributes with the prefix data- are valid as of HTML5, and they work with all browsers even with earlier doctypes now (it's just that technically they aren't valid in earlier doctypes; I'm not aware of any browser that cares).

Going a bit off-topic, if you're allowed to make bigger changes, you can ditch the onclick on the a tags entirely and instead use event bubbling by hooking the click event of whatever container holds all of these a elements. This is because unless cancelled, a click travels up the tree (from child to parent) until it is handled, and you can figure out by looking at the event object which child was actually clicked (so you can get its data-img attribute.) If you can/want to introduce a library like jQuery, Prototype, Closure, etc., they can simplify doing that markedly.