本文實例講述了原生JS實現動態加載js文件并在加載成功后執行回調函數的方法。分享給大家供大家參考,具體如下:
有的時候需要動態加載一個javascript文件,并且在加載成功后執行回調函數(例如文件中保存了json數據之類的)。要實現這樣的功能,可以使用<script> 元素的load 事件(IE9+、chrome、FireFox等)和onreadystatechange
事件(IE8以下),直接上代碼:
function loadScript(src, callback) { var script = document.createElement('script'), head = document.getElementsByTagName('head')[0]; script.type = 'text/javascript'; script.charset = 'UTF-8'; script.src = src; if (script.addEventListener) { script.addEventListener('load', function () { callback(); }, false); } else if (script.attachEvent) { script.attachEvent('onreadystatechange', function () { var target = window.event.srcElement; if (target.readyState == 'loaded') { callback(); } }); } head.appendChild(script); }
調用方法示例:
loadScript('http://cdn.staticfile.org/jquery/1.6.2/jquery.min.js',function(){ console.log('onload'); });
運行后控制臺輸出onload,如下圖所示:
上述代碼感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試運行一下,看看運行結果如何。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript文件與目錄操作技巧匯總》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com