今天小编跟大家讲解下有关H5单页面系统开发，动态加载js ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关H5单页面系统开发，动态加载js 的相关资料，希望小伙伴们看了有所帮助。
最近开发一个手机端办公系统，用了framework7框架，完全用H5开发网站我也是第一次上手，很不熟练，很多概念也不知道。
framework7采用单页面模式，所有功能都在一个主页面上完成，用Ajax方式调用其他页面，开发的系统比较大的话，肯定也有很多js，但文档里没有提供如何调用js，可能这是基础知识，哈哈。
将js添加在其他页面中，将不被调用。我本来想将所有js都在主页面上引用，这样虽然可以，但肯定不效率，后来才想到搜索：动态加载js。如下代码：
var i93comm = {};//动态加载一个js/css文件i93comm.loadjscssfile=function(filename, filetype) { if (filetype =="js") { var fileref = document.createElement('script'); fileref.setAttribute("type","text/Javascript"); fileref.setAttribute("src", filename); document.getElementsByTagName("body")[0].appendChild(fileref); } else if (filetype =="css") { var fileref = document.createElement("link"); fileref.setAttribute("rel","stylesheet"); fileref.setAttribute("type","text/css"); fileref.setAttribute("href", filename); document.getElementsByTagName("head")[0].appendChild(fileref); }}//移动已经加载过的js/cssi93comm.removejscssfile=function(filename, filetype) { var targetelement = (filetype =="js") ?"script": (filetype =="css") ?"link":"none"; var targetattr = (filetype =="js") ?"src": (filetype =="css") ?"href":"none"; var allsuspects = document.getElementsByTagName(targetelement); for (var i = allsuspects.length; i >= 0; i--) { if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(filename) != -1) allsuspects[i].parentNode.removeChild(allsuspects[i]); }}//替换已经加载的js / css文件，代码如下：i93comm.createjscssfile = function (filename, filetype) { if (filetype =="js") { var fileref = document.createElement('script'); fileref.setAttribute("type","text/Javascript"); fileref.setAttribute("src", filename); } else if (filetype =="css") { var fileref = document.createElement("link"); fileref.setAttribute("rel","stylesheet"); fileref.setAttribute("type","text/css"); fileref.setAttribute("href", filename); } return fileref;} i93comm.replacejscssfile = function (oldfilename, newfilename, filetype) { var targetelement = (filetype =="js") ?"script": (filetype =="css") ?"link":"none"; var targetattr = (filetype =="js") ?"src": (filetype =="css") ?"href":"none"; var allsuspects = document.getElementsByTagName(targetelement); for (var i = allsuspects.length; i >= 0; i--) { if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename) != -1) { var newelement = i93comm.createjscssfile(newfilename, filetype); allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]); } }}然后在framework7的路由设置里调用和移除：
routes: [ { path: '/procurement/declare/', url: '/pages/procurement/declare.html', on: { pageInit: function (event, page) { i93comm.loadjscssfile("js/procurement/declare.js?v=0.2","js"); }, pageBeforeIn: function (event, page) { }, pageAfterIn: function (event, page) { getDepartmentList(); }, pageBeforeRemove: function (event, page) { i93comm.removejscssfile("js/procurement/declare.js?v=0.2","js"); }, } }, { path: '/procurement/approval/', url: '/pages/procurement/approval.html', }, ],问题解决，希望对H5初学者有用！
来源：爱蒂网
