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

Nov 28 2006

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

2 responses so far

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

  2. 通りすがり

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

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

    やっと解決しました。

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

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

Leave a Reply