モーグルとカバとパウダーの日記

モーグルやカバ(EXカービング)山スキー(BC)などがメインの日記でした。今は仕事のコンピュータ系のネタが主になっています。以前はスパム対策関連が多かったのですが最近はディープラーニング関連が多めです。

文法エラーのあるHTMLで古いIEのみjQueryがエラーを起こす

CMSで作られたページが、とある環境でのみjQueryの特定行でエラーがポップアップしてきてしまう、という相談を受けました。
ポップアップされる内容はjQuery内で「Invalid argument」でエラーが起きているというものでした。
エラーが起きているjQueryの箇所は「this.parentNode.insertBefore(a,this.nextSibling);」という部分でした。
何かシステム的な変更があったわけではなく、通常のHTML編集しかやっていなかったのに、いつの間にかこれが出るようになったとのことでした。


調査していくと、エラーが出るのがCMSの編集(プレビュー)画面のみで、他の環境で試すと問題が出なかったため、なんらかの環境依存であることがわかりました。
IE7/8/9 の(既にサポートが切れてる)古いIEでは同じエラーが出ており、開発者モードではないのでエラーがポップアップしないだけ(下部のステータス行には黄色「!」でエラーが表示されている)であり、CMS依存ではなくjQueryIE7/8/9依存であることがわかりました。


そこでエラーメッセージやエラーの出た部分の内容から「jquery Invalid argument nextSibling」あたりで探していくと、やっとこ該当しそうな件がありました。


[SOLVED] JavaScript Error in IE8 - Webpage error details "Message: Invalid argument." | Zyxware Technologies
http://www.zyxware.com/articles/2724/solved-javascript-error-in-ie8-webpage-error-details-message-invalid-argument

just check for HTML errors and fix them one by one.


HTMLに腐ってるところがあると、jQueryがパースする時にIE7/8/9のときだけエラーで止まってしまうようです。


今回の例だと、下記HTMLのように

<li><a href="…"><b>hoge<a href=…">fuga</a></b></a></li>
  • aタグが入れ子になっていること
  • aタグとbタグが「<a><b></a></b>」のように互い違いになっていること


というようなおかしなHTMLがありました。ユーザが修正時に間違って入れ込んでしまったようです。
そこでこのHTMLを修正することで、エラーが出なくなることが確認できました。


jQuery内のInvalid argumentなので、なにかのJSから呼ばれている時にパラメータがおかしくなるのだろうか、と思ってしまい、HTMLの文法の問題とはなかなかわからなかったので、同様の問題に当たった方の参考になれば。


…というか今さらjQueryIE7/8/9のみで起こる問題とか、参考になる方少ないでしょうけども…