8

在網頁中，我們多半是在<head>中宣告要Include的js檔或css檔，例如:

<head>
<script type="text/javascript" src="/img/loading.svg" data-src="blah.js"></script>
<link src="/img/loading.svg" data-src="blah.css" type="text/css" ref="stylesheet"></link>
</head>

在某些情況下，可能需要依狀況動態載入不同的Javascript檔或CSS Stylesheet，要怎麼做呢? 看了以下的範例大家就明白了。

var headID = document.getElementsByTagName("head")[0];
var newCss = document.createElement('link');
newCss.type = 'text/css';
newCss.rel = "stylesheet";
newCss.href = "blah.css";
headID.appendChild(newCss);
var newJs = document.createElement('script');
newJs .type = 'text/javascript';
newJs .src= "blah.js";
headID.appendChild(newJs);

Comments

# by 小雷

真的是，一葉敝目不見泰山。

# by leem

To Jeffrey, 請問若我將jQuery動態載入，則執行到 $(function() {}); 敘述時會出現「錯誤: 必須要有物件」的訊息，請問jQuery是否不能以此方式來動態載入呢？謝謝!

# by Jeffrey

to leem, 你必須確認jQuery已載入完成才能開始使用$做事，我剛好有另一篇文章在聊怎麼動態載入jQuery，可以參考看看: http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/01/15/4061.aspx

# by leem

to Jeffrey, 我成功動態載入jQuery了，但若在importJS的onload參數寫下列程式則第1次會沒有效果，而重新reload之後就可以了，若將 $(function() {}); 寫法刪除則可正常執行，不知是不是還有什麼要注意的？謝謝! function() { $(function() { //將此行寫法刪除即可正常執行 alert('done!'); }); });

# by Jeffrey

to leem, $(function() { ... });的寫法意指在網頁載入完成後(相當於<body onload>事件)執行該段程式。我的想法是，既然使用了動態載入JS，則程式觸發的時機應該就不是掛在網頁載入完成事件，而是放在動態載入JS完成事件中，因此不需再使用$(function() { ... });包裝程式邏輯，直接將程式碼放在importJS第三個參數的匿名函數function() { ... }中即可。

# by Ammon

如果在dom ready之後再執行到 $(function(){...})，則會立刻執行，可以自己試試看或 看 source code // If the DOM is already ready if ( jQuery.isReady ) // Execute the function immediately fn.call( document, jQuery ); // Otherwise, remember the function for later else // Add the function to the wait list jQuery.readyList.push( function() { return fn.call(this, jQuery); } );

# by Jeffrey

to Ammon, 看了一下Source Code, 您說得沒錯，若在網頁載入完成後才bind ready事件，函數會立即被執行。感謝指點! to leem, 經Ammon大大提示，載入完成後呼叫$(function() {...})會立即執行，理論上你原先的寫法也OK。我自己實測一切正常，沒能做出第一次不行，第二次OK的狀況。

# by leem

to Jeffrey, 我後來試可以正常執行了，只是不知道之前是哪個地方弄錯，會有第一次不行，第二次可以的狀況。不過，現在可以了，謝謝!

Post a comment