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/css
i93comm.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初学者有用！  

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_2510