How to Auto Include a Javascript File


Posted in Javascript onFebruary 02, 2007

Form: http://www.webreference.com/programming/javascript/mk/
Author:Mark Kahn

Many developers have a large library of JavaScript code at their fingertips that they developed, their collegues developed, or that they've pieced together from scripts all over the Internet. Have you ever thought that it would be nice to not have to search through all those files just to find that one function? This article will show you how dynamically include any JavaScript file, at runtime, by simply calling a function in that file!

Here's an example: You have a function foo() in file bar.js. In your code, you know that foo() might be called, but it probably won't be because most people do not use its functionality. You don't want to force the user to download bar.js unless it's going to be used because it's a fairly large file. Here you'll learn how to make a fake foo() function that actually loads bar.js on the fly and then calls the real foo() function.

Dynamically Loading a Script
As many developers know, there are at least two different ways to dynamically load a script at runtime. The first is to create a script object and append it to the document. The second is to use an XMLHTTP request to grab the source code, and then eval() it. 

It is this second method that we're going to use, and we're going to exploit the fact that an XMLHTTP request has the capability to completely stall any script activity. 

First, some basics: how to create an XMLHTTP Object. There are as many different functions to return a cross-browser XMLHTTP Object as there are developers that work with AJAX. I happen to have my own as well, and here's a simplified example of that: 

function getXMLHttpObj(){  
  if(typeof(XMLHttpRequest)!='undefined')  
    return new XMLHttpRequest();    var axO=['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.4.0',  
    'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'], i;  
  for(i=0;i<axO.length;i++)  
    try{  
      return new ActiveXObject(axO[i]);  
    }catch(e){}  
  return null;  
} 

Most browsers other than Internet Explorer 5 or 6 have a built-in XMLHttpRequest object. Internet Explorer 7, when it's released, will also have this object natively. The first thing we do is check to see if this object exists. If it does, we create an instance of it and that's it. If the object doesn't exist, we attempt to create one of several ActiveX Objects. We don't know what objects our users have installed, so we attempt to create several different XMLHTTP objects, starting with the newest ones. 

Now in order to dynamically load functions, we first need to define them. We could do this one function at a time, but instead of hard-coding dozens of functions, we can choose to just make an object or array with all the file names and the functions you want to have auto-included: 

var autoIncludeFunctions = {  
  'scripts/file1.js': ['function1', 'function2', 'function3'],  
  'scripts/file2.js': ['function4', 'function5', 'function6'],  
  'scripts/file3.js': ['function7', 'function8', 'function9']  
} 

Our autoIncludeFunctions object should contain a list of JavaScript files, as well as a list of functions in those files. Here we are using shorthand JavaScript notation to create both the object and the arrays, but the same thing could be accomplished in many different ways. 

These .js files can contain any code you have available, such as JavaScript menus, animations, etc. The simplest example would be a file titled "file1.js" that only contained "function function1(){ alert('Hello, World!'); }".

Note that if any of these files contain functions with the same name as another file, only the last function listed will be used. 

To make things a bit easier, we're going to make a function that will pull a JavaScript file down and execute it. It's very important, in our case, that the third paramater sent to the XMLHTTP object be false. This forces the script to wait for the response to download as opposed to continuing on with other code. 

function loadScript(scriptpath, functions){  
  var oXML = getXMLHttpObj();  
  oXML.open('GET', scriptpath, false);  
  oXML.send('');  
  eval(oXML.responseText);  
  for(var i=0; i<functions.length; i++)  
    window[functions[i]] = eval(functions[i]);  
} 
The loadScript function expects two arguments: scriptpath and functions. "scriptpath" should contain the URL to your JavaScript file, and "functions" is the array of functions that exist in this JavaScript file.

As you can see, the code to pull and execute a script is straightforward. The browser first downloads, and then interprets the JavaScript file. If you've read any other articles on AJAX development, you might remember that in most cases the third argument sent to the open() function of an XMLHTTP object is usually "true." In our case we have it set to "false." This argument controls the state of the XMLHTTP object. If set to true, the object runs asynchrounously, meaning that all other JavaScript code continues while the object is loading. While this is a good thing in many circumstances, if we implemented it here our code would return before our file was done loading. Since we want our code to wait until this file is complete, we set this third argument to false, thus pausing our JavaScript execution until we are ready to continue. 

When the code is evaluated from the responseText, it's executed in the limited scope of the loadScript function and because of this, none of these functions will be available outside of the loadScript function. In order do get around this, the for loop adds each function to the window object, thus making it globally available. 

It's important to note that only scripts on the same server as the current page can be called in this manner. This is inherent to the XMLHTTP Object and is a necessary measure to increase general browser security. 

Javascript 相关文章推荐
jQuery实现html表格动态添加新行的方法
May 28 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
node 版本切换的实现
Feb 02 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
Code:loadScript( )加载js的功能函数
Feb 02 #Javascript
JavaScript脚本性能的优化方法
Feb 02 #Javascript
JavaScript中“+=”的应用
Feb 02 #Javascript
HTTP状态代码以及定义(解释)
Feb 02 #Javascript
任意位置显示html菜单
Feb 01 #Javascript
Javascript 判断 object 的特定类转载
Feb 01 #Javascript
背景音乐每次刷新都可以自动更换
Feb 01 #Javascript
You might like
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
python numpy元素的区间查找方法
2018/11/14 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
详解python对象之间的交互
2020/09/29 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
会计实习生自我鉴定
2013/12/12 职场文书
地球一小时倡议书
2014/04/15 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
初三语文教学计划
2015/01/22 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
公司管理建议书
2015/09/14 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android