zoukankan      html  css  js  c++  java
  • 关于 ajax 动态返回数据 css 以及 js 失效问题

    ajax 毕竟是异步的 所以动态加载出来的数据 难免遇到 css 或者 js 失效的问题,所以要动态加载 css ji等文件了

    1.公共方法 load 

      //动态加载 js /css 
            function loadjscssfile(filename, filetype) {
                if (filetype == "js") { //判定文件类型
                    var fileref = document.createElement('script')//创建标签
                    fileref.setAttribute("type", "text/javascript")//定义属性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)
                }
                if (typeof fileref != "undefined")
                    document.getElementsByTagName("head")[0].appendChild(fileref)
            }

     2.  示例代码

     //初始化左侧 管理菜单
            function InitLeftMenu() {
    
                var flag = false;    //标识,表示页面上数据还未处理完成
    
                $("#side-menu").empty();
                var menulist = ' <li class="nav-header"><div class="dropdown profile-element">';
                menulist += '<span><img alt="image" class="img-circle" src="/WebClient/static//BC.P.plus/img/profile_small.jpg" /></span>';
                menulist += '<a data-toggle="dropdown" class="dropdown-toggle" href="#">';
                menulist += '<span class="clear">';
                menulist += '<span class="block m-t-xs"><strong class="font-bold">OCP-admin</strong></span>';
                menulist += '<span class="text-muted text-xs block">管理员<b class="caret"></b></span>';
                menulist += '</span>';
                menulist += '</a>';
                menulist += '</div>';
                menulist += '<div class="logo-element">  QPTS  </div>';
                menulist += '</li>';
                //同步获取
                $.ajax({
                    type: 'GET',
                    url: '/Handler/MenuPermissionsASHX.ashx?Func=GetEasyUIMenuList',
                    async: false,//同步
                    dataType: 'json',
                    success: function (json) {
                        _menus = eval('(' + json.data + ')');
    
                        $.each(_menus.menus, function (i, n) {
                            menulist += "<li>";
                            menulist += '<a href="#"> <i class="fa fa fa-bar-chart-o"></i><span class="nav-label">' + n.menuname + '</span><span class="fa arrow"></span></a> ';
                            menulist += '<ul class="nav nav-second-level">';
                            $.each(n.menus, function (j, o) {
    
                                menulist += '<li><a class="J_menuItem"  href="' + o.url + '"  title="' + o.menuname + '">' + o.menuname + '</a></li> ';
    
                            })
                            menulist += '</ul>';
                            menulist += '</li>';
                        })
    
                        flag = true;                
                        $("#side-menu").html(menulist);
    
                    },
                    error: function (xhr, status, error) {
                        alert("操作失败"); //xhr.responseText
                    }
                });    
             
                var loadFile;
    
               loadFile = setInterval(function() {//定时检测    
                    if(flag) {//如果数据已经处理完毕
                        loadjscssfile('static/Bootstrap/css/bootstrap.min.css', "css"); //加载你的css文件
                        loadjscssfile('static/jQuery/jquery-2.1.1.js', "js"); //加载你的js文件
                        loadjscssfile('static/Bootstrap/js/bootstrap.min.js', "js"); //加载你的js文件
                        clearTimeout(t);//取消定时检测节省开销
                    }
                },50);
    
            }

    相关链接:http://www.cnblogs.com/lkf18/archive/2012/05/24/2515935.html

  • 相关阅读:
    CSPS模拟 49
    StrGame
    CSPS模拟 48
    [没有证明]原根求法
    CSPS模拟 47
    CSPS模拟 46
    CSPS模拟 45 乔迁之喜
    CSPS模拟 44
    平衡二叉树
    go语言学习--指针数组和数组指针
  • 原文地址:https://www.cnblogs.com/foreverfendou/p/5984749.html
Copyright © 2011-2022 走看看