JavaScript 動態嵌入技巧

JavaScript 的內容,可以透過程化的方式動態載入,例如以下的網頁:

<!DOCTYPE html>
<html >
<head>
    <title></title>
</head>
<body>
    <p id="message"  style="font-size:xx-large;font-weight:900;"></p>
    <script src="asyncjs.js" ></script>
</body>
</html>

其中的 <script> 於網頁載入之後,會執行 asyncjs.js 這個外部檔案,此檔案內容如下:

var msg = 'Hello JavaScript !';
document.getElementById('message').innerHTML = msg;

網頁中配置的 <p> 最後會輸出指定的訊息如下:



你也可以透過程式化的方式動態將其載入,將上述的 <script> 標籤移除,加入以下的程式碼:

<script>
        var head = document.getElementsByTagName('HEAD')[0];
        var sc = document.createElement('script');
        sc.src = 'asyncjs.js';
        head.appendChild(sc);
</script>

首先取得 <head> 參照,建立一個新的 <script> 元素,並且指定其 src 屬性,設定所要執行的 JavaScript 檔案路徑,然後將其加入至 <head> 當中。重新瀏覽此範例會得到相同的結果。

如你所見,網頁文件上的任何 DOM 元素,都可以透過 JavaScript 進行操作,透過此種技巧,你可以將某些 JavaScript 儲存於伺服器端,並在需要時再動態載入,建立更彈性的網頁應用程式。

沒有留言: