Chr*_*phe 4 javascript inline event-handling onload-event
我需要在页面中动态包含和运行脚本.我正在使用图像onload事件:
<img src="blank.gif" onload="DoIt" />
DoIt函数看起来像这样(只是这个例子):
this.onload=' ';this.src='image.jpg';
我无法控制页面本身(我只控制页面将调用的HTML字符串),因此我需要在标记中明确包含DoIt函数.
我尝试使用匿名函数,但它不起作用:
<img src="blank.gif" onload="function(){this.onload=' ';this.src='image.jpg';}" />
我应该只是内联编写脚本,如下所示:
<img src="blank.gif" onload="this.onload=' ';this.src='image.jpg';" />
在这种情况下是否有任何限制(例如脚本长度)？
谢谢你的帮助!
Ivo*_*zel 16
该this不会在函数内部工作,因为函数被称为window对象,因此this将引用window.
如果要将代码包装在函数中,则必须包装该函数,使用thisset的元素调用它或将其this作为参数传递:
<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>
然而这对我来说并没有多大意义:
我无法控制页面本身(我只控制页面将调用的HTML字符串),
你只能控制img标签吗？如果你可以输出abritary HTML,那么为什么不把东西放在`script'标签中呢？
更新
使用脚本块,您可以在那里声明您的功能,然后只需在onload事件中调用它.
<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)" />
现在,对于许多图像,您只需要一个功能.
如果你需要真正的想象,你可以设置你的脚本标签来拉入jQuery或任何其他库.
<script src="somepathtojquery"></script>
<script>
// do jquery stuff in herep
如果你需要很多这些处理程序,jQuery可以完成这项工作.
当你完全控制HTML时,我仍然问自己为什么不首先使用库？:)
尝试:
<img src="blank.gif" onload="(function(el){el.onload=' ';el.src='image.jpg';})(this)" />