ダイナミックスクリプトの作成とダイナミックスタイルの作成

1134 ワード

IE、FireFox、OperaおよびSafariの動的作成に対応したJavascriptコードの作成方式
function loadScriptString(code) {
    var script = document.createElement("script")
    script.type = "text/javascript"
    try { 
        script.appendChild(document.createTextNode(code))
    } catch (ex) {
        script.text = code
    }
    document.body.appendChild(script)
}

//            
loadScriptString("function sayHi(){alert('hi')}")
sayHi()
ここではまず、IE以外の全てのブラウザがこのような方式をサポートするため、標準のDOMテキストノード方法を試みる.この行のコードがエラーを投げたら、IEと説明しますので、text属性を使わなければなりません.
IE、FireFox、Opera及びSafariの動的作成スタイルコードに対応する方式
function loadStyleString(css) {
    var style = document.createElement("style")
    style.type = "text/css"
    try {
        style.appendChild(document.createTextNode(css))
    } catch (ex) {
        style.styleSheet.cssText = css
    }
    var head = document.getElementsByTagName("head")[0]
    head.appendChild(style)
}

//           :
loadStyleString("body{background-color:red}")
以上のコードはすべてのブラウザで正常に実行できます.ただし、作成した要素を要素ではなく追加してこそ、すべてのブラウザで動作が一致することが保証されます.