JavaScriptで画像を切り替える際に、あるコードだとIE6で動かなくなる

IEでのJavaScriptの動作確認は悪夢を見ること多々ですが、また謎仕様に遭遇。かなり長時間はまりました。。

動作例(PHPのソース)

先日作ったCAPTCHAを人間が見ても読めなかったときに画像を新しく生成し直す仕組みを考えていました。単純に、リンクをクリックするとJavaScriptが呼び出され、img要素のsrcを書き換える、という仕組み。上の動作例では?以降の引数にどんどん「a」を加えていく実装になっています。なおこのCAPTCHAはリロードすれば同じファイル名でも再生成されます。

hrefにはjavascript:void(0)を指定してonClickの方にコードを書く癖がついているので、今回もそれでやってFirefoxでは問題なく動いていたのですがIE6でなぜか動かず。onClickの中は実行されていますが、srcを書き換えても画像ファイルへのリクエストがなされません。ですので、画像の部分が空白になってしまいます。

キャッシュ等の問題を真っ先に疑いましたが、最終的にはhrefにvoid(0)を指定してonClickでJavaScriptを実行する組み合わせがよくないらしく、hrefで実行させたり、hrefの指定を#にしたりすれば動くようになりました。

原因がわかれば、Googleにどう聞けばいいかわかるのであっさり同じ問題の解決策が見つかりました。
ここで解説されているreturn false;をonClickに書き加える方がスマートですね。

Proxyとか :: javascript:void(0); で gifアニメ が動かないバク

僕が使った検索語の屍。もっと「バグ」方面で探した方が良かったかも。

javascript IE 画像の表示
javascript IE 画像 切り替え
javascript IE 画像 再読み込み
javascript img src reload

This entry was posted in いじる. Bookmark the permalink. Both comments and trackbacks are currently closed.

3 Comments

  1. のり3
    Posted 2007/09/18 at 4:07 pm | Permalink

    この問題で数週間ハマッテました。
    お蔭様で今日からグッスリ眠れます^^
    ありがとうございました!

  2. 通りすがり
    Posted 2007/11/29 at 1:58 pm | Permalink

    いろいろ検索してやっとこのページに来ました。

    私もJavascriptでの画像の切り替えに苦心していましたが、
    このページにたどり着けて良かった・・・(泣

    やっと解決しました。

    javascript:void(0)とonclickは対で使うものとばかり思ってましたが、弊害があるんですね。

    本当に助かりました。
    ありがとうございます!

  3. kuwa
    Posted 2010/04/26 at 11:49 am | Permalink

    画像の切替ではまってました。
    onclickで、location.hrefするときは、return false;をつけていたのですが、画像の切替でも必要なのは盲点でした。

    感謝です。

2 Trackbacks

Page optimized by WP Minify WordPress Plugin