動態載入javascript檔案
阿新 • • 發佈:2019-01-09
動態載入javascript?
在國外已經有一個封裝好的loadScript.js,程式碼如下:
轉載自: http://huanyq2008.iteye.com/admin/blogs/850740
很俗的一個題目,如果你已經知道如何動態載入外部javascript,那麼你可以跳過這篇文章繼續閱讀其它的。如果你還不知道怎樣動態載入外部javascript檔案的話,請耐心的繼續閱讀。
什麼時候會用到動態載入javascript檔案的技術呢?其實很多的時候都有可以用到,比如從伺服器端生成javascript指令碼,但是用到動態載入javascript檔案主要是因為前端和後端資料的互動(至少哥會在這個時候用到)。
前幾天在修改移動版支付寶時,就使用了動態載入javascript檔案。
記住,這裡說的動態載入js檔案是指利用js動態載入js檔案,並非是伺服器生成。
如何建立動態載入外部javascript的指令碼呢?非常簡單
var script = document.createElement('script');//建立script標籤 script.src = 'http://mgw.alipay.com/choosePhone.htm?' + (new Date()).getTime().toString().substring(0,8); script.type = "text/javascript"; script.characterSet = 'utf-8'; //相容IE和DOM標籤的script onload事件 script.onload = script.onreadystatechange = function(){ if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') { alert(malipayBrands.length); } }
請注意以上程式碼中的script.onload = script.onreadystatechange = function (){},其中onload用於DOM標籤的瀏覽器,onreadystatechange用於IE。
最後在head中插入我們的script
document.getElementsByTagName('head')[0].appendChild(script);
在國外已經有一個封裝好的loadScript.js,程式碼如下:
function loadScript(url, callback){ var f = arguments.callee; if (!("queue" in f)) f.queue = {}; var queue = f.queue; if (url in queue) { // script is already in the document if (callback) { if (queue[url]) // still loading queue[url].push(callback); else // loaded callback(); } return; } queue[url] = callback ? [callback] : []; var script = document.createElement("script"); script.type = "text/javascript"; script.onload = script.onreadystatechange = function(){ if (script.readyState && script.readyState != "loaded" && script.readyState != "complete") return; script.onreadystatechange = script.onload = null; while (queue[url].length) queue[url].shift()(); queue[url] = null; }; script.src = url; document.getElementsByTagName("head")[0].appendChild(script); }
轉載自: http://huanyq2008.iteye.com/admin/blogs/850740