js动态添加外部js(顶)

在做Web开发的时候,我们会碰到需要根据需要动态的添加外部的js应用,然后在我们的页面中调用引用的js的方法。

但是会出现一个问题,如下代码:

先添加一个测试js文件test.js,内容很简单

function Test(d) {
    alert(d);
}

然后我们动态的添加test.js 引用

            var ga = document.createElement('script'); ga.type = 'text/javascript';
            ga.async = false;
            ga.src = "test.js";
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);

           Test(21342);//报错,因为js文件是异步载入的。

这个问题可能大家和我一样会出现同样的困扰。今天无意中发现一种很好的方法,多亏jquery这个神器。

就是通过jquery里面ajax动态加载这个js文件。

在juery中,有这个方法,$.getScript(url,fn);

对就是它,同时我们通过设置ajax的同步调用就能解决上面的问题了,非常的巧妙

    $.ajaxSetup({ async: false, cache: false });
            $.getScript("test.js");
            $.ajaxSetup({ async: true });
            Test(123);

注意一定要设置成同步调用,否则会出问题。非常的巧妙,兴奋。。。。。

附上测试代码:https://files.cnblogs.com/lorgine/js%E5%8A%A8%E6%80%81%E7%9A%84%E6%B7%BB%E5%8A%A0js.rar

     

原文地址:https://www.cnblogs.com/lorgine/p/2219248.html