SyntaxHighlighter + jQuery 1.7.1 + IE で JavaScript エラー
SyntaxHighlighter を jQuery 1.7.1 と組み合わせて使用すると Internet Explorer で JavaScript エラーが発生する。問題が修正された jQuery 1.7.2 にアップデートするか、問題の発生しない jQuery 1.7 以前のバージョンに戻すと解決する。
※ WordPress の場合は jQuery 1.7.1 は WordPress 3.3.x に、jQuery 1.7.2 は WordPress 3.4.x に同梱されている。
経緯など
先日作成した ThickBox の使い方ページを Internet Explorer で動作確認したら ThickBox が動作しないことが判明。エラーメッセージをチェックすると jquery.js で次のような JavaScript エラーが発生していた。
‘null’ は Null または オブジェクトではありません。(‘null’ is null or not an object)
原因を絞り込んでいくとどうやら SyntaxHighlighter Evolved によってエラーが発生している模様。早速情報を探してみると次のような情報を発見した。(日本語の情報は見つからず)
- WordPress > Support ≫ [Plugin: SyntaxHighlighter Evolved] SyntaxHighlighter problems with jQuery 1.7.1
- #10961 (Error in XRegExp using jQuery 1.7.1 in IE6-9) – jQuery Core – Bug Tracker
- SyntaxHighlighter problems with jQuery 1.7.1 | Blog of Travis Hydzik
要約すると「SyntaxHighlighter などが利用する XRegExp ライブラリを jQuery 1.7.1 と組み合わせて使用すると全てのバージョンの Internet Explorer で JavaScript エラーが発生する」というもの。この問題は jQuery 1.7.1 より前のバージョンでは発生せず jQuery 1.7.2 で修正された。
jQuery 1.7.1 は WordPress 3.3.x に同梱されているため、半年ぐらい前から発生していたエラーのはずだが、SyntaxHighlighter によるコードのハイライトは特に問題なく行われていたため、今まで問題に気付かなかったと思われる。
対策としては、ざっと次のようなものが考えられる。
- jQuery 1.7.2 にアップデートする
- jQuery 1.7 以前のバージョンに戻す (非推奨)
- WordPress の場合は WordPress 3.4.x にアップグレードする (要バックアップ)
- SyntaxHighlighter の shCore.js を改変する
付録：WordPress の同梱 jQuery バージョン一覧
| WordPress バージョン | jQuery バージョン |
|---|---|
| WordPress 2.6 – 2.7.1 | jQuery 1.2.6 |
| WordPress 2.8 – 2.9.2 | jQuery 1.3.2 |
| WordPress 3.0 – 3.0.6 | jQuery 1.4.2 |
| WordPress 3.1 – 3.1.4 | jQuery 1.4.4 |
| WordPress 3.2 – 3.2.1 | jQuery 1.6.1 |
| WordPress 3.3 – 3.3.3 | jQuery 1.7.1 |
| WordPress 3.4 – 3.4.1 | jQuery 1.7.2 |