TIPS-如何動態載入Javascript或CSS?

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

<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);
歡迎推文分享:
Published 02 February 2007 07:57 PM 由 Jeffrey
Filed under: ,


意見

# 小雷 said on 03 October, 2008 04:27 AM

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

# leem said on 01 February, 2009 07:23 PM

To Jeffrey,

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

# Jeffrey said on 01 February, 2009 08:48 PM

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

# leem said on 01 February, 2009 10:58 PM

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

function() {

  $(function() {   //將此行寫法刪除即可正常執行

     alert('done!');

  });

});

# Jeffrey said on 02 February, 2009 08:49 AM

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

# Ammon said on 03 February, 2009 08:26 AM

如果在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); } );

# Jeffrey said on 03 February, 2009 02:47 PM

to Ammon, 看了一下Source Code, 您說得沒錯,若在網頁載入完成後才bind ready事件,函數會立即被執行。感謝指點!

to leem, 經Ammon大大提示,載入完成後呼叫$(function() {...})會立即執行,理論上你原先的寫法也OK。我自己實測一切正常,沒能做出第一次不行,第二次OK的狀況。

# leem said on 15 February, 2009 12:09 AM

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

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 

請輸入以上的數字:

搜尋

Go

<February 2007>
SunMonTueWedThuFriSat
28293031123
45678910
11121314151617
18192021222324
25262728123
45678910
 
RSS
【工商服務】

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


BlogLook Score and Rank

Syndication