動態腳本

前面的話

　　動態腳本是指在頁面加載時不存在，但未來的某一時刻經過修改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>