动态脚本和动态样式

动态脚本

• 动态插入一个脚本

function loadScript(url) {
    const script = document.createElement('script')
    script.src = url
    document.body.appendChild(script)
}

• 动态执行一段代码，其会立即生效，相当于调用 eval

function loadScriptString(code) {
    var script = document.createElement('script')
    script.type = 'text/javascript'
    try { // 除 IE 外的浏览器
        script.appendChild(document.createTextNode(code))
    } catch() { // IE 浏览器
        script.text = code
    }
    document.body.appendChild(script)
}

通过 innerHTML 属性创建的 <script> 元素永远不会执行

动态样式

• 动态插入一个外部 css

function loadStyles(url) {
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.type = 'text/css'
    link.href = url
    const head = document.getElementsByTagName('head')[0]
    head.appendChild(link)
}

• 动态设置样式，其会立即生效

function loadStyleString(css) {
    const style = document.createElement('style')
    style.type = 'text/css'
    try { // 除 IE 外的浏览器
        style.appendChild(document.createTextNode(css))
    } catch() { // IE 浏览器
        style.styleSheet.cssText = css
    }
    const head = document.getElementsByTagName('head')[0]
    head.appendChild(style)
}