Inline event handlers and anonymous functions
I have a need to dynamically include and run a script in a page. I am using an image onload event for this:
<img src="blank.gif" onload="DoIt" />
The DoIt function looks like this (just made up this example):
this.onload=' ';this.src='image.jpg';
I have no control on the page itself (I only control the HTML string that the page will call), so I need to include the DoIt function explicitly in the markup.
I tried using an anonymous function, but it didn't work:
<img src="blank.gif" onload="function(){this.onload=' ';this.src='image.jpg';}" />
Should I just write the script inline, like this:
<img src="blank.gif" onload="this.onload=' ';this.src='image.jpg';" />
And in this case are there any limitations (e.g. script length)?
Thanks for your help!
Answer
The this won't work inside the function since the function is called by the window object, therefore the this will refer to window.
If you want to wrap your code inside a function you must wrap that function, call it with the this set to the element or pass the this as a parameter:
<html>
<body>
<!-- call the function and set the this accordingly-->
<img src="foo.png" onload="(function(){...}).call(this)" />
<!-- pass the this as a parameter -->
<img src="foo.png" onload="(function(e){....})(this)" />
</body>
</html>
Yet this doesn't really make sense to me:
I have no control on the page itself (I only control the HTML string that the page will call),
Do you only have control over the img tags? If you can output abritary HTML, then why not just put something in a `script' tag?
Update
With a script block you could declare your function in there and then simply call it in the onload event.
<script>
function doIt(el) {
// code in here
console.log(el.id); // you could do stuff depending on the id
}
</script>
<img id="img1" src="foo.png" onload="doIt(this)" />
<img id="img2" src="foo.png" onload="doIt(this)" />
Now you need only one function for many images.
And if you need to get really fancy, you can setup your script tag to pull in jQuery or any other library.
<script src="somepathtojquery"></script>
<script>
// do jquery stuff in herep
If you need a lot of these handlers jQuery could do the job.
Still I'm asking my self when you have full control over the HTML why don't you use a library in the first place? :)