6

ページにスクリプトを動的に含めて実行する必要があります。これには画像オンロードイベントを使用しています：

<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';" />

この場合、制限はありますか (例: スクリプトの長さ)?

ご協力いただきありがとうございます！

4

2 に答える 2

20

関数はオブジェクトthisによって呼び出されるため、 は関数内では機能しません。したがって、は を参照します。windowthiswindow

コードを関数内にラップする場合は、その関数をラップする必要があります。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タグのみを制御できますか? 独自の 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)" />

これで、多くの画像に対して必要な関数は 1 つだけになりました。

また、本当に凝ったものにする必要がある場合は、スクリプト タグを設定して、jQuery やその他のライブラリを取り込むことができます。

<script src="somepathtojquery"></script>
<script>
   // do jquery stuff in herep

これらのハンドラーが多数必要な場合は、jQuery で十分です。

それでも、HTML を完全に制御できるのに、なぜそもそもライブラリを使用しないのかと自問自答しています。:)

于 2010-12-03T03:30:30.807 に答える
8

試す：

<img src="blank.gif" onload="(function(el){el.onload=' ';el.src='image.jpg';})(this)" />
于 2010-12-03T03:28:26.833 に答える