2012年3月29日木曜日

ie8でjavascriptでlink要素を追加したのに有効とならない

表題の通り,自作ゲーマーカードをie8に対応させた際に引っかかった点.
本スクリプトでは内部でjQueryを使って読み込むcssファイルを切り替えるようにしている.その際にlink要素を生成し,header要素に追加することになるのだが,ie8において追加したlink要素が有効とならない不具合が発生した.Firefox,chrome,safariでは正常動作するのだが.


具体例を示す.これは拙作ゲーマーカードスクリプトの一部であり,getCssメソッドで取得したcssファイルのパスをlink要素に設定してheader要素に追加するコードである.
これだけ見ると問題点はなさそうに見えるが,ie8だと不具合が起こる.スタイルシートの内容が有効とならないのだ.エラーも発生せず,デバッガでも問題ないように見えるため非常に質が悪い.
    //head要素を書き換える.
    function setHeader(){
        $("<link>")
            .attr("rel", "stylesheet")
            .attr("type", "text/css")
            .attr("charset", "UTF-8")
            .attr("href", getCss())
            .appendTo("head");
    }  

これを次のように修正することで正常に動作するようになる.link要素オブジェクトを生成したら先にheader要素に追加し,そのあとで各種属性値を設定するようにする.
    //head要素を書き換える.
    function setHeader(){
        //NOTE:ie8ではlink要素を追加してから属性を設定する.
        var link = $("<link>").appendTo("head");
        link
            .attr("rel", "stylesheet")
            .attr("type", "text/css")
            .attr("charset", "UTF-8")
            .attr("href", getCss());
    } 

どこかで見覚えのあるトピックスなのだが,見事に同じ穴に落ちたので記念にトピックスととして残しておこう.

その他jQuery1.7.1を用いたところgetJSONメソッドによるコールバックがieにおいて無視される現象が発生した.version1.4では発生しないところを見ると,何らかの仕様変更が影響しているようだ.なににつけて問題の発生するie.もう少し何とかならなかったのか?

0 件のコメント:

コメントを投稿