zoukankan      html  css  js  c++  java
  • jquery load 加载改造,只加载body

    背景:

      项目中大量用到了jquery和easyui组件,原生load经常出现主页面异常,原因是组件被重复初始化。也考虑过用iframe,但是在实际项目中的效果,最终取消了iframe方案,也尝试了其他一些方案,相对好用的便是load改造版。

    jquer load详解:http://www.w3school.com.cn/jquery/ajax_load.asp

    核心代码:

    function loadHTML(url,contener){ // contener:dom对象或者id

          var ctr = contener;

          if(typeof contener == 'string'){

             ctr = $("#"+contener);

          }

          if(ctr){

            $(ctr).load(url+" div:first",function(response,status,xhr){

          // url+" div:first":load的url特别写法格式,即加载html片段

               if(status=="success"){// 数据读取成功后,取body部分的html片段,重新到容器里

                 var context = response.substring(response.indexOf("<body"),response.indexOf("</body>")+7);

                 $(ctr).html(context);

               }

             });

          }

    }

    主页面"loadHtml.html":

    <html>
     <head>
      <title>加载html</title>
      <!-- 引入jquery基础部分 -->
     <script type="text/javascript">
       $(function(){
          var url = "htmlSpec.html";
          loadHTML(url,"contenerDiv");
       });

      // 最重要的部分
       function loadHTML(url,contener){
          var ctr = contener;
          if(typeof contener == 'string'){
             ctr = $("#"+contener);
          }
          if(ctr){
            $(ctr).load(url+" div:first",function(response,status,xhr){

          // url+" div:first":load的url特别写法格式,即加载html片段
               if(status=="success"){// 数据读取成功后,取body部分的html片段,重新到容器里
                 var context = response.substring(response.indexOf("<body"),response.indexOf("</body>")+7);
                 $(ctr).html(context);
                 $.parser.parse(this); // easyui 组件解析
                 contextParse(this,true);// 业务系统的组件解析

    // 此处再次解析,是因为load加载已过了主页面的加载完成周期,需要再次手动触发解析,才能初始化元素

    // easyui组件解析请参考$.parser.parse,

    //业务系统的解析这里其实就是多了一个带上下文的选择器:$(selector,context);具体请参考easy ui 零散技巧部分
               }
             });
          }
       }
      </script>

     </head>
     <body>
      <div class="easyui-tabs">
          <div title="Tab1" style="padding:20px;">
        <!-- 加载子页面的容器 contenerDiv -->

            <div id="contenerDiv"></div> 
          </div>
          <div title="Tab2" style="overflow:auto;padding:20px;">
              tab2
          </div>
      </div>

     </body>
    </html>

    子页面“htmlSpec.html”:

    <html>
     <head>
      <title>加载html</title>
      <!-- jquert集成部分 -->
     </head>
     <script language="javascript">
      
     </script>
     <body id="sdfsdf">
     <div>
      
     <script language="javascript">
      function msg(){
       alert("some message");
      }
        </script>
      <div class="easyui-tabs" style="500px;height:250px;">
          <div title="Tab1" style="padding:20px;">
              <button onclick="msg()">alert</button>
          </div>
          <div title="Tab2" style="overflow:auto;padding:20px;">
              tab2
          </div>
      </div>
     </div>
     </body>
    </html>

    总结:改造后的加载方式,在实际项目中,能有效的解决js冲突,以及使用jquery或easyui组件时,原始load导致组件被重复初始化异常,当然主页面和子页面最好有一定的规范,如:有公共的头文件,自定义的js或者css写在body里。这样就能更好的解决冲突和加载异常了。

  • 相关阅读:
    thinkphp验证码功能
    thinkphp表单验证
    thinkphp操作数据库的CRUD
    thinkphp基础知识
    什么是预测区间,置信区间与预测区间二者的异同是什么?
    好消息! 不用再羡慕Python有jupyter 我R也有Notebook了【附演示视频】
    手把手教你在Windows环境下升级R
    Feather包实现数据框快速读写,你值得拥有
    pycharm设置字体大小
    pycharm显示行号
  • 原文地址:https://www.cnblogs.com/xtreme/p/5074084.html
Copyright © 2011-2022 走看看