CMSで作られたページが、とある環境でのみjQueryの特定行でエラーがポップアップしてきてしまう、という相談を受けました。
ポップアップされる内容はjQuery内で「Invalid argument」でエラーが起きているというものでした。
エラーが起きているjQueryの箇所は「this.parentNode.insertBefore(a,this.nextSibling);」という部分でした。
何かシステム的な変更があったわけではなく、通常のHTML編集しかやっていなかったのに、いつの間にかこれが出るようになったとのことでした。
調査していくと、エラーが出るのがCMSの編集(プレビュー)画面のみで、他の環境で試すと問題が出なかったため、なんらかの環境依存であることがわかりました。
IE7/8/9 の(既にサポートが切れてる)古いIEでは同じエラーが出ており、開発者モードではないのでエラーがポップアップしないだけ(下部のステータス行には黄色「!」でエラーが表示されている)であり、CMS依存ではなくjQueryとIE7/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の文法の問題とはなかなかわからなかったので、同様の問題に当たった方の参考になれば。