動態腳本 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　動態腳本是指在頁面加載時不存在，但將來的某一時刻通過修改DOM動態添加的腳本。和操作HTML元素一樣，創建動態腳本也有兩種方式：插入外部文件和直接插入內部javascript代碼。下面將詳細介紹這兩種情況

外部腳本

//script.js里面的內容
box.style.color = "red";

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "script.js";
document.body.appendChild(script);

　　使用函數封裝如下：

<div id="box">測試文字</div>
<button id="btn">動態添加腳本</button>
<script>
function loadScript(url){
    loadScript.mark = 'load';
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}
btn.onclick = function(){
    if(loadScript.mark != 'load'){
        loadScript("js/script.js");        
    }
}
</script>

內部腳本

　　另一種插入動態腳本的方式是插入內部腳本，如下所示

<script>
    box.style.color = "red";
</script>

var script = document.createElement("script");
script.innerHTML = 'box.style.color = "red"';
document.body.appendChild(script);

　　使用函數封裝如下：

<div id="box">測試文字</div>
<button id="btn">動態添加樣式</button>
<script>
function loadScript(str){
    loadScript.mark = 'load';
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.innerHTML = str;
    document.body.appendChild(script);
}
btn.onclick = function(){
    if(loadScript.mark != 'load'){
        loadScript("box.style.color = 'red'");        
    }
}
</script>

　　在標準瀏覽器下，上面代碼可以正常運行。但是，在IE8-瀏覽器下卻報錯。這是因為IE8-瀏覽器將<script>元素視為一個特殊的元素，不允許DOM訪問其子節點，使用appendChild()方法或innerHTML屬性都會報錯

兼容寫法

　　動態插入內部腳本存在兼容問題，可使用<script>元素的text屬性替代innerHTML屬性來指定javascript代碼

<div id="box">測試文字</div>
<button id="btn">動態添加樣式</button>
<script>
function loadScript(str){
    loadScript.mark = 'load';
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.text = str;
    document.body.appendChild(script);
}
btn.onclick = function(){
    if(loadScript.mark != 'load'){
        loadScript("box.style.color = 'red'");        
    }
}
</script>