如何动态加载外部Javascript文件_javascript技巧

最近在网上找到了一个可以动态加载js文件的js加载器,具体代码如下:
JsLoader.js

var MiniSite=new Object();
/**
 * 判断浏览器
 */
MiniSite.Browser={
 ie:/msie/.test(window.navigator.userAgent.toLowerCase()),
 moz:/gecko/.test(window.navigator.userAgent.toLowerCase()),
 opera:/opera/.test(window.navigator.userAgent.toLowerCase()),
 safari:/safari/.test(window.navigator.userAgent.toLowerCase())
};
/**
 * JsLoader对象用来加载外部的js文件
 */
MiniSite.JsLoader={
 /**
  * 加载外部的js文件
  * @param sUrl 要加载的js的url地址
  * @fCallback js加载完成之后的处理函数
  */
 load:function(sUrl,fCallback){
  var _script=document.createElement('script');
  _script.setAttribute('charset','gbk');
  _script.setAttribute('type','text/javascript');
  _script.setAttribute('src',sUrl);
  document.getElementsByTagName('head')[0].appendChild(_script);
  if(MiniSite.Browser.ie){
   _script.onreadystatechange=function(){
    if(this.readyState=='loaded'||this.readyStaate=='complete'){
     //fCallback();
     if(fCallback!=undefined){
       fCallback();
     }

    }
   };
  }else if(MiniSite.Browser.moz){
   _script.onload=function(){
    //fCallback();
    if(fCallback!=undefined){
      fCallback();
    }
   };
  }else{
   //fCallback();
   if(fCallback!=undefined){
     fCallback();
   }
  }
 }
};

JsLoader.js测试

<!DOCTYPE HTML>
<html>
 <head>
 <!--引入js加载器 -->
 <script type="text/javascript" src="js/JsLoader.js"></script>
 <title>JsLoaderTest.html</title>
 <script type="text/javascript">
  if(MiniSite.Browser.ie){
   //动态加载Js
   MiniSite.JsLoader.load("js/jquery-1.9.1.js",function(){
    alert("动态加载的是jquery-1.9.1.js");
    $(function(){
     alert("jquery-1.9.1.js动态加载完成之后做的处理操作");
    });
   });
  }else{
   MiniSite.JsLoader.load("js/jquery-2.0.3.js",function(){
    alert("动态加载的是jquery-2.0.3.js");
    $(function(){
     alert("jquery-2.0.3.js动态加载完成之后做的处理操作");
    });
   });
  }
 </script>
 </head>

 <body>

 </body>
</html>

测试结果如下:

IE浏览器下测试结果:

google浏览器下的测试结果:

为大家分享的如何使用js加载器动态加载外部Javascript文件,相信一定会对大家的学习有很大的帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript加载文件
javascript外部文件
javascript动态加载js、javascript 动态加载、动态加载外部js、javascript外部引用、javascript引用外部js,以便于您获取更多的相关知识。

时间: 2024-10-24 09:51:08

如何动态加载外部Javascript文件_javascript技巧的相关文章

JS加载器如何动态加载外部js文件_javascript技巧

今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var MiniSite=new Object(); /** * 判断浏览器 */ MiniSite.Browser={ ie:/msie/.test(window.navigator.userAgent.toLowerCase()), moz:/gecko/.test(window.navigator.userAgent.toLowerCase()), opera:/opera/.test(windo

javascript开发随笔二 动态加载js和文件_javascript技巧

这时候最好的做法就是按需引入,动态引入组件js和样式,文件load完成后调用callback,运行js.代码还是很简便的 1. 判断文件load完成.加载状态ie为onreadystatechange,其他为onload.onerror 复制代码 代码如下: if(isie){ Res.onreadystatechange = function(){ if(Res.readyState == 'complete' || Res.readyState == 'loaded'){ Res.onrea

动态加载外部javascript文件的函数代码分享_javascript技巧

复制代码 代码如下: (function (clover) { clover.loadScript = function loadScript(url, callback) { var heads = document.getElementsByTagName('head'); if (heads.length == 0) { alert("page must have one head element"); } var head = heads[0]; var script = do

如何最快的加载外部JavaScript文件

    当<script>标签位于html文档流中的时候,位于<script>后面的html会被阻止渲染,必须等到该script加载完以后才会后面的html才会渲染,通过JavaScript动态的生成一个script标签,可以避免上面你的这个问题,因为这个会是外部加载的script的文件位于html文档流以外.因此动态的加载外部的JavaScript文件可以提高页面的渲染速度,提高用户体验.   最佳实践 Steve Souders关于外部的JavaScript文件不阻碍html文

jquery动态加载外部js文件代码研究

$.getScript函数动态加载js 有时网页上的js过多就会让网页加载太慢,用户体验不好,我们可以使用jquery $.getScript函数动态加载我们需要的js文件    代码如下 复制代码 $("#load").click(function(){  $.getScript('helloworld.js', function() {     $("#content").html('Javascript is loaded successful!');  })

javascript 动态加载 css 方法总结_javascript技巧

1. 用在外部CSS文件中加载必须的文件 @importurl(style.css); //只能用在CSS文件中或者style标签中 2. 简单的在页面中加载一个外部CSS文件 document.createStyleSheet(cssFile); 2. 用createElement方法创建CSS的Link标签 varhead=document.getElementsByTagName('HEAD').item(0); varstyle=document.createElement('link'

js动态加载外部js文件的方法

(function (clover) { clover.loadScript = function loadScript(url, callback) { var heads = document.getElementsByTagName('head'); if (heads.length == 0) { alert("page must have one head element"); } var head = heads[0]; var script = document.crea

knockoutjs动态加载外部的file作为component中的template数据源的实现方法_javascript技巧

玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template,比如下面这样: ko.components.register('message-editor', { viewModel: function(){}, template:"" }); 很显然,viewmodel就是function函数区,而template就是模板区,然后通过register函数将component注册到kn

解决jquery easyui easyloader加载外部js文件失败问题

  easyloader加载外部js文件时,虽然回调函数调用成功,但js文件加载不上,解决方法如下: 找到easyload.js文件,打开如下位置:红色字体部分将script改为this: var _8=document.createElement("script"); _8.type="text/javascript"; _8.language="javascript"; _8.src=_5; _8.onload=_8.onreadystate