JavaScript 的內容,可以透過程化的方式動態載入,例如以下的網頁:
其中的 <script> 於網頁載入之後,會執行 asyncjs.js 這個外部檔案,此檔案內容如下:
網頁中配置的 <p> 最後會輸出指定的訊息如下:

你也可以透過程式化的方式動態將其載入,將上述的 <script> 標籤移除,加入以下的程式碼:
首先取得 <head> 參照,建立一個新的 <script> 元素,並且指定其 src 屬性,設定所要執行的 JavaScript 檔案路徑,然後將其加入至 <head> 當中。重新瀏覽此範例會得到相同的結果。
如你所見,網頁文件上的任何 DOM 元素,都可以透過 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 儲存於伺服器端,並在需要時再動態載入,建立更彈性的網頁應用程式。
沒有留言:
張貼留言