P_BLOG のフォーラムで、JavaScript 絡みと思われる問題が散見されます。

原因になりそうなことに心当たりがあったので、先日、この JavaScript 関連の問題を修正してみました。他の方にも有益だと思いますので、公開することにします。

P_BLOG ver.1.2β2 以降を導入している方が対象です。ver.1.2β1 以前に導入すると整合性が取れず、絶対おかしくなるので、やめておいてください。

• P_BLOG JavaScript Refurbishment

原理的には解決していると思うのですが、実際に確認していない部分もありますので、これで直ったよ！とか、相変わらずだよ〜とか、フィードバックがあれば、よろしくお願いします。

何を修正したのか

window.onload 問題

scripts.jp の clickableCite 関数のすぐ次に

window.onload = clickableCite;

という記述があります。

clickableCite 関数そのものは、P_BLOG で blockquote タグに cite 属性を付けて引用を行った場合に、引用元へのリンクを「→ Source」として付け加えてくれるものです。

しかし、window.onload で関数を呼び出してしまうと、他に load イベントでスクリプトを実行しようとするものがあった場合に、イベントがかち合ってしまい、正しく動かなくなります。

これを回避するために、Firefox や Safari では addEventListener、IE では attachEvent を使うのが定石なようです。

実装方法はいろいろあるのですが、今回は JavaScript & AJAX Tutorials に載っていたコードを使わせてもらいました。

Lightbox やあれこれポップアップなどを P_BLOG に導入した際に起こっていた問題は、これで解決されるはずです。（私はこれらを使っていませんので、要確認なのですが…。）

Internet Explorer や JavaScript 無効時の挙動を改善

コメント記入欄のスマイリーをクリックすると、コメントを書いている最中にも関わらず、いきなり画面遷移が起こり、いきなりページが読み込まれてしまう問題があります。また、同様のことが IE 以外のウェブブラウザでも、JavaScript が無効であるときには起こります。

この現象が起こっているのには2つの要因がありました。

1. JavaScript が無効だと、ダミーのリンクが実際に動作してしまう

   JavaScript が有効でないときに、スマイリーをクリックしてページ遷移が起こってしまうのは、各スマイリーにリンクが設定されているからです。

   これを修正するのに一番簡単な方法は、単に a タグをなくして、リンクを外してしまうことです。リンクを外した後に、代わりにどこかに onclick 属性を設定してやれなければいけません。各スマイリーを input type="image" とか、イメージを用いた button に変更しようかと思ったのですが、そこまではやらず、直接画像の img 要素に onclick を設定してみました。

2. IE の getElementByID のバグ

   JavaScript が有効であるはずの IE で同じ現象が起こっていたのは、JavaScript がエラーで機能していなかったからです。なぜエラーが起こっていたかというと、IE のバグだったのです。

   scripts.jp の smiley 関数に getElementByID("comment") でコメント欄の DOM オブジェクトを取得している箇所があります。一見なんの変哲もない処理ですが、ここに問題が潜んでいました。

   P_BLOG ver.1.2β2 以降では、フォームに name="comment" になっている要素と、id="comment" になっている要素があります。これらは本来別のものなのですが、IE は getElementByID でなぜか id 属性だけでなく name 属性にも反応して、両方が存在すると、getElementByID がエラーを起こしてしまうのです。これがなかなかわからずに、問題解決に苦労しました。

   この IE の不具合は、よく知られている問題なのでしょうか。ざっと検索した感じでは、話題にはなっていないようでした。なお、IE7 では検証していません。IE6 の話です。ただ、IE7 でもこのスマイリーの不具合が起こるという報告があったので、それから推測すると、IE7 でも修正されていないのではないでしょうか。（それとも私が何か勘違いしているだけ？）

   このやっかいな問題を避けるために、form に含まれる要素の名前を変更しています。今のところ、このブログではきちんと動作しているようですが、思わぬ副作用がないとも限りませんので、P_BLOG JavaScript Refurbishment 導入後に不可解な現象が起こったときは、ぜひ報告して下さい。

みなさま、フィードバックお待ちしています。