django实现tab页思路！

最新推荐文章于 2024-08-26 09:50:26 发布

手艺人123

最新推荐文章于 2024-08-26 09:50:26 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： django

本文链接：https://blog.youkuaiyun.com/wjy397/article/details/49329877

django 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在网页中动态加载JavaScript文件的方法，并解决了在Django框架中使用特定语法引入静态文件的问题。同时，文章还探讨了如何通过jQuery加载分离的HTML文件，以及如何在业务JS中使用函数作用域来避免变量污染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先是在主页js里动态加载tab页需要的js

方法：

 function addScript(jsfile,callback){
        var head= document.getElementsByTagName('head')[0];  
        var script= document.createElement('script');  
        script.type= 'text/javascript';  
        script.onload = script.onreadystatechange = function() {  
            if (!this.readyState || this.readyState === "loaded" ||    this.readyState === "complete" ) { 
                script.onload = script.onreadystatechange = null;  
                if(callback&&typeof(callback)== 'function'){
                      callback();
                }
            } 
        };  
        script.src= jsfile;  
        head.appendChild(script);
    }

    function jsLoaded(){
       alert('ok');
    }
    调用方式，在需要的地方
    addScript(js路径,jsLoaded);

问题出在 django模板需要{% static 'MoudleBaseJs/menu_manage.js' %}这种格式所以放到js路径里根本找不到。

-------

各个业务js用function包含可以有效限制变量污染问题：因为js是函数作用域，在函数体内只要var声明就只作用于当前业务js里不会污染全局同名js，

另外可以不加var声明来引用主页的全局变量。

-------

tab页里动态加载分离的html调用jquery的load方法：

$("#center2").load("BaseMoudule/GetLoad #menu_manage");  #menu_manage为分离html的dom的id 意思是将主页id为center2的dom下增加分离html里id为menu_mang的dom为子级

------------------------------------------------------------------------------------------------------------------------------------------

解决{% static 'MoudleBaseJs/menu_manage.js' %}这种格式  所以 放到js路径里根本找不到。

直接改变路径为

addScript("static/MoudleBaseJs/menu_manage.js",jsLoaded);

不需要加%static%这样的引入静态文件的特殊字符

程序员学习公众号: