如何动态加载js文件

Posted 2023-05-08

动态创建 script 标签，就可以加载了，简单写个 demo，未测试，仅提供思路：

var script = document.createElement( \'script\' );

script.type = \'text/javascript\';

script.src = \'http://******************.js\';

script.onload = function() 

    console.log( \' Done\' );

;

document.getElementsByTagName( \'head\' )[ 0 ].appendChild( script );

上面代码需要注意几点：

一些旧版本IE可能不支持 script 的 onload，需要使用 onreadystatechange。

插入节点是，严谨的话，需要判断一下是否有<base>标签存在

参考技术A 做一个判断去执行 $.getscript("路径");注意引入jquery 参考技术B 要在哪里动态加载呢？ 参考技术C js文件最后加载有三种实现方法。
第一种方法：
将js文件放在代码最后，因为程序是从上往下执行，所以最后加载。这种方法最简单粗暴。
第二种方法：
使用window.onload
事件。当一个文档完全下载到浏览器中时，才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的，也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利，因为无需考虑加载的次序。
第三种方法：
使用jquery库的ready方法。如：$(document).ready 。会在DOM完全就绪并可以使用时调用。
注：

使用jquery库的ready方法，虽然这也意味着所有元素对脚本而言都是可以访问的，但是，并不意味着所有关联的文件都已经下载完毕。换句话说，当HMTL下载完成并解析为DOM树之后，代码就会执行。
使用$(document).ready() 一般来说都要优于试用onload事件处理程序，但必须要明确一点的是，因为支持文件可能还没有加载完成，所以类似图像的高度和宽度这样的属性此时不一定有效。

JQuery 之 动态加载JS或JS文件

　　如果用jquery的append直接加载script标签的话，会报错的。

1、可以用 document.write() 实现加载动态JS代码。

2、可以用 getScript() 函数实现加载JS文件。

$.getScript("./test.js");  //加载js文件
$.getScript("./test.js",function(){  //加载test.js,成功后，并执行回调函数
  console.log("加载js文件");
});