ダイナミックスクリプトの作成とダイナミックスタイルの作成
1134 ワード
IE、FireFox、OperaおよびSafariの動的作成に対応したJavascriptコードの作成方式
IE、FireFox、Opera及びSafariの動的作成スタイルコードに対応する方式
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}")
以上のコードはすべてのブラウザで正常に実行できます.ただし、作成した要素を要素ではなく追加してこそ、すべてのブラウザで動作が一致することが保証されます.