关于ajax动态返回数据css以及js失效问题(动态引入JS)

小程序1550 更新时间：2025-06-08 05:05:49

2023年6月20日发(作者：)

关于ajax动态返回数据css以及js失效问题（动态引⼊JS）ajax 毕竟是异步的所以动态加载出来的数据难免遇到 css 或者 js 失效的问题，所以要动态加载 css ji等⽂件了1.公共⽅法 load

//动态加载 js /css

function loadjscssfile(filename, filetype) { if (filetype == "js") { //判定⽂件类型 var fileref = Element('script')//创建标签 ribute("type", "text/javascript")//定义属性type的值为text/javascript ribute("src", filename)//⽂件的地址 } else if (filetype == "css") { //判定⽂件类型 var fileref = Element("link") ribute("rel", "stylesheet") ribute("type", "text/css") ribute("href", filename) } if (typeof fileref != "undefined") mentsByTagName("head")[0].appendChild(fileref) }2. ⽰例代码//初始化左侧管理菜单 function InitLeftMenu() { var flag = false; //标识，表⽰页⾯上数据还未处理完成 $("#side-menu").empty(); var menulist = '

'; //同步获取 $.ajax({ type: 'GET', url: '/Handler/?Func=GetEasyUIMenuList', async: false,//同步 dataType: 'json', success: function (json) { _menus = eval('(' + + ')'); $.each(_, function (i, n) { menulist += "

"; menulist += '

' + me + '

'; menulist += '

'; }) flag = true;

$("#side-menu").html(menulist); }, error: function (xhr, status, error) { alert("操作失败"); //seText } });

var loadFile; loadFile = setInterval(function() {//定时检测

if(flag) {//如果数据已经处理完毕 loadjscssfile('static/Bootstrap/css/', "css"); //加载你的css⽂件 loadjscssfile('static/jQuery/', "js"); //加载你的js⽂件 loadjscssfile('static/Bootstrap/js/', "js"); //加载你的js⽂件 clearTimeout(t);//取消定时检测节省开销 } },50); } menulist += ' ' + me + '

　　关于动态引⼊JS还有好⼏种⽅法，上⾯是采⽤createElement的⽅法创建元素之后appendChild()添加元素。⽐如常⽤的

("<>") 或者采⽤jQuery改变script标签的src属性，再有可以⽤jQuery的append()⽅法向页⾯指定的元素中添加script标签。　　但是需要注意的是引⼊JS的相互依赖关系，有时候我们引⼊的JS调⽤了其他JS的东西，所以我们需要注意动态引⼊JS的时机。　　如果JS是独⽴的JS，我们可以写个⼀次性⾃调函数引⼊相关JS。　　　　如果动态引⼊的JS中依赖其他JS，我们需要在页⾯加载完成后引⼊相关JS，但是需要注意使⽤引⼊。执⾏⽐jQuery慢，所以会在jQuery执⾏完才动态引⼊JS。