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 儲存於伺服器端，並在需要時再動態載入，建立更彈性的網頁應用程式。
沒有留言:
張貼留言