TIPS-如何動態載入Javascript或CSS?
8 | 33,064 |
在網頁中,我們多半是在<head>中宣告要Include的js檔或css檔,例如:
<head>
<script type="text/javascript" src="blah.js"></script>
<link src="blah.css" type="text/css" ref="stylesheet"></link>
</head>
<script type="text/javascript" src="blah.js"></script>
<link 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);
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, 我後來試可以正常執行了,只是不知道之前是哪個地方弄錯,會有第一次不行,第二次可以的狀況。不過,現在可以了,謝謝!