html中动态加载js文件

html中动态加载js文件

一、使用jQuery

1.jQuery.getScript(url, fn).done(fn)

getScript函数可以请求js文件并加载，本质为ajax请求

• url 请求地址
• fn 回调函数
• done 完成后执行函数

2.jQuery.ajax

jQuery.ajax({
    url: "url",
    dataType: "script",
    async: false,
    success: function(){
        
    }
});

3.问题

在实际开发中发现此为异步请求，实际开发中虽然加载js文件但是使用无法访问到，并且

jQuery.ajaxSettings.async = false

和

 jQuery.ajaxSetup({
 	async: false
 });

全局设置无效

解决办法:

1.不在$(function(){})中加载js文件，将代码直接写进 script标签（会优先ready函数执行，但是需要在jQuery文件加载后，可以直接将此script标签放到body标签的最后）

2.直接在done或success中完成逻辑代码

二、 javascript动态加载js文件

1.document.write

document.write("<script type='text/javasript' src=''></script>");

2.创建Dom节点

const script = document.createElement("script");
script.setAttribute("type", "text/javasript");
script.setAttribute("src", "url");
document.getElementsByTagName("body")[0].appendChild(script);

核心思想：创建script标签，不在$(function(){})中加载js文件，将代码直接写进 script标签（会优先ready函数执行，但是需要在jQuery文件加载后，可以直接将此script标签放到body标签的最后）