最近開發一個手機端辦公系統，用了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初學者有用！

H5單頁面系統開發，動態加載js