Question

我需要在页面中动态包含和运行脚本。我正在使用图像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';" />

在这种情况下是否存在任何限制（例如脚本长度）？

感谢您的帮助！

Answer 1

this在函数内部不起作用，因为window对象调用了函数，因此this将引用window。

如果要将代码包装在函数中，则必须包装该函数，使用设置为元素的this来调用它，或者将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时，我还在问自己为什么不首先使用库？：）

Answer 2

尝试：

<img src="blank.gif" onload="(function(el){el.onload=' ';el.src='image.jpg';})(this)" />

内联事件处理程序和匿名函数

2 个答案: