您的位置：首页 > Web前端 > JavaScript

动态加载JS文件，完美解决跨域、编码、嵌套、队列、兼容性、执行顺序等相关问题。

2008-09-01 11:21 1136 查看

JS代码如下：

var DynamicLoadScriptQueue  =

{

    Loading : false,

    TaskQueue : [],

    CallBack : function (StartTime, CallBackMethod)

    {

        CallBackMethod && CallBackMethod(new Date().valueOf() - StartTime.valueOf());

        this.Loading = false;

        this.Load();

    },

    Load : function ()

    {

        if (!this.Loading && this.TaskQueue.length)

        {

            var Head = document.getElementsByTagName("head")[0];

            if (!Head)

            {

                this.TaskQueue.length = 0;

                this.TaskQueue = null;

                throw new Error('The head does not exist in this page.');

            }

            var DLSQ = this, TaskQueue = this.TaskQueue.shift(), StartTime = new Date, Script = document.createElement('script');

            this.Loading = true;

            Script.onload = Script.onreadystatechange = function ()

            {

                if (Script && Script.readyState && Script.readyState != 'loaded' && Script.readyState != 'complete') return;

                Script.onload = Script.onreadystatechange = Script.onerror = null;

                Script.Src = '';

                Script.parentNode.removeChild(Script);

                Script = null;

                DLSQ.CallBack(StartTime, TaskQueue.CallBackMethod);

                StartTime = TaskQueue = null;

            };

            Script.charset = TaskQueue.Charset || 'gb2312';

            Script.src = TaskQueue.Src;

            Head.appendChild(Script);

        }

    },

    AddTask : function (Src, Charset, CallBackMethod)

    {

        this.TaskQueue.push({ 'Src' : Src, 'Charset' : Charset, 'CallBackMethod' : CallBackMethod });

        this.Load();

    }

}

调用示例：
1、将上述代码保存为JScript1.js，编码格式选择UTF-8。
2、将以下两段代码分别报存为JScript2.js和JScript3.js，编码格式分别为UTF-8和GB2312。

var strTest = "abcdefg";

var strTemp = "abcdefg";

3、新建测试页面WebForm1.aspx，代码如下：

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>动态加载JS文件测试页面</title>

    <script type="text/javascript" src ="JScript1.js"></script>



    <script type="text/javascript">

    var Test1 = function(LoadTime)

    {

        alert("加载耗时：" + LoadTime + "毫秒，测试字符串：" + strTest);

    }

    var Test2 = function(LoadTime)

    {

        alert("加载耗时：" + LoadTime + "毫秒，测试字符串：" + strTemp);

    }

    DynamicLoadScriptQueue.AddTask("JScript2.js","UTF-8",Test1);

    DynamicLoadScriptQueue.AddTask("JScript3.js","GB2312",Test2);

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>



    </div>

    </form>

</body>

</html>

4、将所有文件放到同一目录，运行WebForm1.aspx即可。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： function webform 测试 callback server null

相关文章推荐

新的分享

章节导航