码迷,mamicode.com
首页 > Web开发 > 详细

动态加载JS脚本

时间:2015-03-29 20:54:54      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

一. document.write()

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic load JS</title>
    <script>
        function init() {
            document.write(‘<script src="dynamic.js"><\/script>‘);
            document.write(‘<input type="button" onclick="load();" value="加载完毕" \/>‘);
        }
        dynamicJS(); //此处报错,由于dynamic.js文件还未加载完毕

        function load() {
            dynamicJS();
        }
    </script>
</head>
<body>
    <input type="button" onclick="init();" value="初始化加载" />
    <!--<input type="button" onclick="load();" value="加载完毕">--> 
</body>
</html>
View Code

问题,1,document.write会重写页面,在点击初始化加载按钮后,页面重绘导致原有的内容丢失,上述代码中注释掉的”加载完毕“按钮会丢失,因此需要在init函数中使用document.write的方式建立一个按钮。

问题2,异步加载,直接调用dynamicJS方法会报错,因为js文件未加载完毕,而在其后的代码已经开始运行。

综上,此种方法不推荐。

二. 动态改变已有script的src属性

技术分享
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Dynamic load JS</title>
    <script id="abc" src=""></script>
    <script>
    function init() {
        abc.src = "dynamic.js";
        dynamicJS(); //此处调用报错,由于还未加载完毕
    }

    function load() {
        dynamicJS();
    }
    </script>
</head>

<body>
    <input type="button" onclick="init();" value="初始化加载" />
    <input type="button" onclick="load();" value="加载完毕">
</body>

</html>
View Code

这个代码运行起来有问题,点击”加载完毕“按钮还是报"Uncaught ReferenceError: dynamicJS is not defined"

问题:异步加载问题

三.动态创建script元素

技术分享
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Dynamic load JS</title>
    <script>
    function init() {
        var myScript = document.createElement(‘script‘);
        myScript.src = ‘dynamic.js‘;
        document.body.appendChild(myScript);
        
        dynamicJS(); //此处调用报错,由于还未加载完毕
    }

    function load() {
        dynamicJS();
    }
    </script>
</head>

<body>
    <input type="button" onclick="init();" value="初始化加载" />
    <input type="button" onclick="load();" value="加载完毕">
</body>

</html>
View Code

问题:相对于第二种方式,不需要在页面上一开始就添加script元素,但同样存在异步加载问题。

动态加载JS脚本

标签:

原文地址:http://www.cnblogs.com/sun-mile-rain/p/4376140.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!