【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 4 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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

沒有留言: