link要素からイベントを受け取ることができるか確認してみた

link要素の onload イベント

今回は、link要素を appendChild 等で追加した際、イベントとして受け取ることができるか調べてみました。

readystatechange は、XMLHttpRequest による通信状態の切り替わりを受け取るイベントですが、反応するのもあったのでついでに記述してみました。

load イベント
  • : IE7以上 , Firefox(9以上) , Opera(11.61)
  • × : IE6以下 , Firefox(8以下) , Chrome(17.0.963.79) , Safari(5.1.2)
readystatechange イベント
  • : IE7以上 , Opera(11.61)
  • × : IE6以下 , Chrome(17.0.963.79) , Safari(5.1.2) , Firefox(11.0)

IE6,7は、IEtester での結果です。また、Chorome,Safari,Opera はカッコ内のバージョンでしか確認していません。

結果は上にあるように、Webkit のレンダリングエンジンを採用している Chrome , Safari 等では、今のところ link要素からのイベントを受け取ることはできないようです。(試しに Lunascape6 の Webkit 表示モードでも確認してみたのですが、これも全く反応しませんでした。)

IEは、7以上ならどちらのイベントも問題なく受け取ることが可能でしたし、Opera も確認したバージョン 11.61 ではどちらも受け取り可能です。

Firefox では、11.0 の段階でもイベントを受け取ることはできないのですが、9.0 から load イベントは受け取れるようになっています。

ということで、今のところブラウザの対応があまり良くないので、利用するならイベントを受け取れないブラウザ用の分岐処理が必要です。

後書き

このサイトでは、左下のセレクトボックスで配色を変更できるようにしてあるのですが、いままでは外部CSSファイルを読み込んでいる link要素の src属性の値を書き換えて変更していました。

しかし、値を書き換えてしまうと書き換え後のファイルが読み込まれるまで、ブラウザによってはスタイルが何も適用されない状態になります。

ということで、この結果を踏まえて配色のCSS切り替え用関数を、イベントを受け取ることができない場合は src属性の値の書き換えのままで、受け取り可能の場合は link要素を作成・追加した後に元のCSSを削除するように変更してみました。

下の記述を条件式として、if文でユーザーエージェント別に分岐させています。

  • window.navigator.userAgent.match(/MSIE [1-6]\.|AppleWebKit|Firefox\/[1-8]\./)

ただ、こういった方法だと偽装されている場合などは目的通りの動きをしてくれなかったりするので、他の方法で分岐させたいところです。

スポンサードリンク

inserted by FC2 system