快捷導(dǎo)航

原生JS實(shí)現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法

更新時間：2020年12月30日 13:04:39 作者：webarn

這篇文章主要介紹了原生JS實(shí)現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法,涉及javascript動態(tài)創(chuàng)建頁面元素、事件監(jiān)聽、回調(diào)函數(shù)使用等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了原生JS實(shí)現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法。分享給大家供大家參考，具體如下：

有的時候需要動態(tài)加載一個javascript文件，并且在加載成功后執(zhí)行回調(diào)函數(shù)（例如文件中保存了json數(shù)據(jù)之類的）。要實(shí)現(xiàn)這樣的功能，可以使用<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);
}

調(diào)用方法示例：

loadScript('http://cdn.staticfile.org/jquery/1.6.2/jquery.min.js',function(){
 console.log('onload');
});

運(yùn)行后控制臺輸出onload，如下圖所示：

補(bǔ)充一個函數(shù)

function sk_loadScript(url, callback) {
 var script = document.createElement("script");
 script.type = "text/javascript";
 if(typeof(callback) != "undefined"){
  if (script.readyState) {
   script.onreadystatechange = function () {
    if (script.readyState == "loaded" || script.readyState == "complete") {
     script.onreadystatechange = null;
     callback();
    }
   };
  } else {
   script.onload = function () {
    callback();
   };
  }
 }
 script.src = url;
 document.body.appendChild(script);
}

if(typeof jQuery=='undefined'){
	sk_loadScript("/comments/js/jquery.js",function(){
		sk_main();
	});
}else{
	sk_main();
}

上述代碼感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測試運(yùn)行一下，看看運(yùn)行結(jié)果如何。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript文件與目錄操作技巧匯總》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: