最近开发一个手机端办公系统,用了Framework7框架,完全用H5开发网站我也是第一次上手,很不熟练,很多概念也不知道。
Framework7采用单页面模式,所有功能都在一个主页面上完成,用Ajax方式调用其他页面,开发的系统比较大的话,肯定也有很多js,但文档里没有提供如何调用js,可能这是基础知识,哈哈。
将js添加在其他页面中,将不被调用。我本来想将所有js都在主页面上引用,这样虽然可以,但肯定不效率,后来才想到搜索:动态加载js。如下代码:
1 var i93comm = {}; 2 //动态加载一个js/css文件 3 i93comm.loadjscssfile=function(filename, filetype) { 4 if (filetype == "js") { 5 var fileref = document.createElement(‘script‘); 6 fileref.setAttribute("type", "text/javascript"); 7 fileref.setAttribute("src", filename); 8 document.getElementsByTagName("body")[0].appendChild(fileref); 9 } 10 else if (filetype == "css") { 11 var fileref = document.createElement("link"); 12 fileref.setAttribute("rel", "stylesheet"); 13 fileref.setAttribute("type", "text/css"); 14 fileref.setAttribute("href", filename); 15 document.getElementsByTagName("head")[0].appendChild(fileref); 16 } 17 } 18 19 //移动已经加载过的js/css 20 i93comm.removejscssfile=function(filename, filetype) { 21 var targetelement = (filetype == "js") ? "script" : (filetype == "css") ? "link" : "none"; 22 var targetattr = (filetype == "js") ? "src" : (filetype == "css") ? "href" : "none"; 23 var allsuspects = document.getElementsByTagName(targetelement); 24 for (var i = allsuspects.length; i >= 0; i--) { 25 if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(filename) != -1) 26 allsuspects[i].parentNode.removeChild(allsuspects[i]); 27 } 28 } 29 30 //替换已经加载的js / css文件,代码如下: 31 i93comm.createjscssfile = function (filename, filetype) { 32 if (filetype == "js") { 33 var fileref = document.createElement(‘script‘); 34 fileref.setAttribute("type", "text/javascript"); 35 fileref.setAttribute("src", filename); 36 } 37 else if (filetype == "css") { 38 var fileref = document.createElement("link"); 39 fileref.setAttribute("rel", "stylesheet"); 40 fileref.setAttribute("type", "text/css"); 41 fileref.setAttribute("href", filename); 42 } 43 return fileref; 44 } 45 46 i93comm.replacejscssfile = function (oldfilename, newfilename, filetype) { 47 var targetelement = (filetype == "js") ? "script" : (filetype == "css") ? "link" : "none"; 48 var targetattr = (filetype == "js") ? "src" : (filetype == "css") ? "href" : "none"; 49 var allsuspects = document.getElementsByTagName(targetelement); 50 for (var i = allsuspects.length; i >= 0; i--) { 51 if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename) != -1) { 52 var newelement = i93comm.createjscssfile(newfilename, filetype); 53 allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]); 54 } 55 } 56 }
然后在Framework7的路由设置里调用和移除:
1 routes: [ 2 { 3 path: ‘/procurement/declare/‘, 4 url: ‘/pages/procurement/declare.html‘, 5 on: { 6 pageInit: function (event, page) { 7 i93comm.loadjscssfile("js/procurement/declare.js?v=0.2", "js"); 8 }, 9 pageBeforeIn: function (event, page) { 10 }, 11 pageAfterIn: function (event, page) { 12 getDepartmentList(); 13 }, 14 pageBeforeRemove: function (event, page) { 15 i93comm.removejscssfile("js/procurement/declare.js?v=0.2", "js"); 16 }, 17 } 18 }, 19 { 20 path: ‘/procurement/approval/‘, 21 url: ‘/pages/procurement/approval.html‘, 22 }, 23 ],
问题解决,希望对H5初学者有用!
原文:https://www.cnblogs.com/i93swy/p/10586100.html