js动态加载脚本

/**
 * 同步加载js脚本
 * @param id   需要设置的<script>标签的id
 * @param url   js文件的相对路径或绝对路径
 * @return {Boolean}   返回是否加载成功,true代表成功,false代表失败
 */
function loadJS(id,url){
    var  xmlHttp = null;
    if(window.ActiveXObject)//IE
    {
        try {
            //IE6以及以后版本中可以使用
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            //IE5.5以及以后版本可以使用
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    else if(window.XMLHttpRequest)//Firefox,Opera 8.0+,Safari,Chrome
    {
        xmlHttp = new XMLHttpRequest();
    }
    //采用同步加载
    xmlHttp.open("GET",url,false);
    //发送同步请求,如果浏览器为Chrome或Opera,必须发布后才能运行,不然会报错
    xmlHttp.send(null);
    //4代表数据发送完毕
    if ( xmlHttp.readyState == 4 )
    {
        //0为访问的本地,200到300代表访问服务器成功,304代表没做修改访问的是缓存
        if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304)
        {
            var myHead = document.getElementsByTagName("HEAD").item(0);
            var myScript = document.createElement( "script" );
            myScript.language = "javascript";
            myScript.type = "text/javascript";
            myScript.id = id;
            try{
                //IE8以及以下不支持这种方式,需要通过text属性来设置
                myScript.appendChild(document.createTextNode(xmlHttp.responseText));
            }
            catch (ex){
                myScript.text = xmlHttp.responseText;
            }
            myHead.appendChild( myScript );
            return true;
        }
        else
        {
            return false;
        }
    }
    else
    {
        return false;
    }
}

调用方法:loadJS("myJS","package.js")

 

 

 

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function init()
        {
            //加载package.js文件,设置script的id为yy
            loadJs("yy","package.js",callbackFunction);

        }
        function callbackFunction()
        {
            functionOne();
        }
        function loadJs(sid,jsurl,callback){
            var nodeHead = document.getElementsByTagName('head')[0];
            var nodeScript = null;
            if(document.getElementById(sid) == null){
                nodeScript = document.createElement('script');
                nodeScript.setAttribute('type', 'text/javascript');
                nodeScript.setAttribute('src', jsurl);
                nodeScript.setAttribute('id',sid);
                if (callback != null) {
                    nodeScript.onload = nodeScript.onreadystatechange = function(){
                        if (nodeScript.ready) {
                            return false;
                        }
                        if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == 'complete') {
                            nodeScript.ready = true;
                            callback();
                        }
                    };
                }
                nodeHead.appendChild(nodeScript);
            } else {
                if(callback != null){
                    callback();
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

 

回调函数方式

 

来源:http://www.cnblogs.com/zhuimengdeyuanyuan/archive/2013/03/06/2946277.html

时间: 2024-10-31 23:36:12

js动态加载脚本的相关文章

JS动态加载脚本并执行回调操作_javascript技巧

关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数.  我们可以动态的创建 <script> 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢,因为我们有些函数需要在脚本加载完成生效后才能开始执行. 经过对网络上资源的搜索,我发现在 IE 浏览器中可以使用

超级强大JS动态加载脚本同时使用加载js文件函数调用

    首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne,很简单,代码如下: function functionOne(){     alert("成功加载"); }         后面的html文件都创建在同一个目录下. 方法一:直接document.write 在同一个文件夹下面创建一个function1.html,代码如下: <html> <head>     <ti

JS 动态加载脚本的4种方法_javascript技巧

如果js文件都比较小,还是一个js好,这样可以减少连接数.下面是4种比较常用的方法,大家可以根据情况选择,最后 将会给推荐一个.1.直接document.write 复制代码 代码如下: <script language="javascript"> document.write("<script src='test.js'><\/script>"); </script> 2.动态改变已有script的src属性 复制代

动态加载脚本提升javascript性能

 动态加载脚本可以有效提升javascript性能,下面有个不错的示例,大家可以参考下 通过文档对象模型(DOM),几乎可以用Javascript动态创建HTML中的所有 内容.其根本在于,<script>标签与页面中的其他元素并无差异:都能通过DOM引用,都能在文档中移动.删除,甚至被创建.用标准的DOM方法可以非常容易地创建一个新年的<script>元素:   代码如下: <script type="text/javascript">  var

jquery ajax()动态加载脚本文件的例子

上次说的jquery动态加载脚本,使用的是getScript(您可以点击相关文章查看),缺点和优点都说了.封装的函数是不自带缓存功能的,默认每次加载都刷新本地脚本.这样的一个特点对于网速不是很快的网站来说,那就是一个漫长的等待,虽然页面已经加载完毕了,但脚本还在路上,访客会以为脚本加载失败,就会反复的刷新页面,结果每次加载脚本都是重新获取的,造成资源的中断和大量的服务器请求.为了解决这个问题,我自己写了个方法,哈哈,当然是根据getScript把ajax方法打包到一个函数里便于多次复用. <!D

JS 动态加载js文件和css文件 同步/异步的两种简单方式_javascript技巧

/*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile

JS动态加载当前时间的方法_javascript技巧

本文实例讲述了JS动态加载当前时间的方法.分享给大家供大家参考.具体实现方法如下: <body bgcolor="#fef4d9" onload ="time()"> <script language="JavaScript"> function time () { var now = new Date(); var yr = now.getYear(); var mName = now.getMonth() + 1; v

JavaScript 动态加载脚本和样式

  3大点: 1.元素位置 2.动态脚本 3.动态样式     一.元素位置 getBoundingClientRect().这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box = document.getElementById('box');//获取元素 alert(box.getBoundingClientRect().top);//元素上边距离页面上边的距离 alert(box.getBounding

求教如何动态加载脚本到HTML?

问题描述 虽然可以动态的加载嵌入HTML中,但是根本就不会被执行.求教高手有什么办法来解决这个问题吗?说句实话有些程序员总是吹嘘Javascript有多强大多强大~我看连include语句都没有的语言原本就弱智的很~我的代码如下:index.html<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Test</title><script>lo