創建動態腳本與創建動態樣式

兼容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()

這里首先嘗試標準的DOM文本節點方法,因為除了IE(在IE中會導致拋出錯誤),所有瀏覽器都支持這種方式。如果這行代碼拋出了錯誤,那么說明是IE,于是就必須使用text屬性了

兼容IE、FireFox、Opera以及Safari的動態創建style樣式代碼的方式

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}")

以上代碼在所有瀏覽器中都可以正常運行,需要注意的是,必須將創建的元素添加到<head>而不是<body>元素,才能保證在所有瀏覽器中的行為一致

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • 前言 轉自博客園 原文 一、簡單介紹一下什么是瀏覽器內核。瀏覽器最重要或者說核心的部分是“Rendering En...
    吳晗君閱讀 3,680評論 1 30
  • <a name='html'>HTML</a> Doctype作用?標準模式與兼容模式各有什么區別? (1)、<...
    clark124閱讀 3,553評論 1 19
  • 圖文作者/糖糖 我們一眾驅車穿過秦嶺,終于在年初一的晚上到達遂寧。涪江邊煙花絢爛,燦若白晝,熱鬧而喜慶,我們也應景...
    唐糖醬閱讀 445評論 4 9
  • 池塘一荷花, 純潔人人夸。 蓮藕出污泥, 荷花不染之。
    東方俠影閱讀 183評論 0 15