关于easyui在使用tab组件创建选项卡时href方式载入页面遇到的问题

   总所周知的easyui的tab组件在创建选项卡的时候，动态的加载内容有两种方式，即content和href。使用content的时候一般都是使用iframe的方式嵌入一个页面，适用于小型项目，也易于它人去查看你的源代码，不利于代码保护，这种方式使用简单，一般不会出现什么问题。在使用href方式的时候，却有不少的问题需要注意.

      例如如下：有两个html页面，tab.htm为tab选项卡页面，kind.htm页面为tab动态加载调用的页面，里面使用了富文本编辑器

   tab.html源码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<! DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html  xmlns="http://www.w3.org/1999/xhtml" > < head >      < title >无标题页</ title >        < script  src="js/kindeditor/kindeditor-all.js" type="text/javascript"></ script >      < script  src="js/kindeditor/lang/zh_CN.js" type="text/javascript"></ script >      < link  href="js/kindeditor/themes/default/default.css" rel="stylesheet" type="text/css" />      < script  src="js/easyui/jquery-1.8.0.min.js" type="text/javascript"></ script >      < script  src="js/easyui/jquery.easyui.min.js" type="text/javascript"></ script >      < link  href="js/easyui/themes/icon.css" rel="stylesheet" type="text/css" />      < link  href="js/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> </ head > < body > < div  class="easyui-tabs"> < div  data-options="iconCls:'icon-reload',href:'kind.htm'">            </ div > </ div > </ body > </ html >

 kind.htm源码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

< script  type="text/javascript">      var editor;      $(function() {            window.setTimeout(function() {              editor = KindEditor.create('#note', {                  width : '680px',                  height : '300px',                  items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink' ],                  uploadJson : '/fileController/upload',                  fileManagerJson : '/fileController/fileManage',                  allowFileManager : true              });          }, 1); });        </ script >         < div  class="easyui-layout" data-options="fit:true,border:false">          < div  data-options="region:'center',border:false" title="" style="overflow: hidden;">              < form  id="form" method="post">              < table  class="table table-hover table-condensed">                  < tr >                      < th >                          编号                      </ th >                      < td >                          < input  name="id" type="text" class="span2" value="8c130179-b86d-4da2-9028-f819619216ff"                              readonly="readonly">                      </ td >                      < th >                          BUG名称                      </ th >                      < td >                          < input  name="name" type="text" placeholder="请输入BUG名称" class="easyui-validatebox span2"                              data-options="required:true" value="zsdcasdasdasd">                      </ td >                  </ tr >                  < tr >                      < th >                          BUG类型                      </ th >                      < td >                          < select  name="typeId" class="easyui-combobox" data-options="width:140,height:29,editable:false,panelHeight:'auto'">                              < option  value="0">错误</ option >                              < option  value="1" selected="selected">功能</ option >                          </ select >                      </ td >                      < th >                          浏览服务器附件                      </ th >                      < td >                          < button  type="button" class="btn" onclick="fileManage();">                              浏览服务器</ button >                      </ td >                  </ tr >                  < tr >                      < th >                          BUG描述                      </ th >                      < td  colspan="3">                          < textarea  name="note" id="note" cols="50" rows="5">kindeditor</ textarea >                      </ td >                  </ tr >              </ table >              </ form >          </ div >      </ div >

 当你运行tab.htm页面以后你会发现虽然kind.htm页面的内容都载入进来了，但是富本文编辑器失效了.

  这时候的解决方法如下：在kind.htm页面中用panel组件将所有的内容包起来即可，或者在tab.htm页面中的tab中创建一个panel，然后将panel组件的内容使用href动态加载，地址指上kind.htm页面即可.（PS：小菜鸟一枚，为什么会这样如果有大虾看到了这且知道原因请不吝赐教！）

 解决的后的代码如下：

 1.tab.htm页面使用panel解决：

  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<! DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html  xmlns="http://www.w3.org/1999/xhtml" > < head >      < title >无标题页</ title >        < script  src="js/kindeditor/kindeditor-all.js" type="text/javascript"></ script >      < script  src="js/kindeditor/lang/zh_CN.js" type="text/javascript"></ script >      < link  href="js/kindeditor/themes/default/default.css" rel="stylesheet" type="text/css" />      < script  src="js/easyui/jquery-1.8.0.min.js" type="text/javascript"></ script >      < script  src="js/easyui/jquery.easyui.min.js" type="text/javascript"></ script >      < link  href="js/easyui/themes/icon.css" rel="stylesheet" type="text/css" />      < link  href="js/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> </ head > < body > < div  class="easyui-tabs"> < div  data-options="iconCls:'icon-reload'"> < div   class="easyui-panel" title="My Panel" style="height:700px;"            data-options="href:'kind.htm',noheader:true,fit:true,height:700">       </ div >    </ div > </ div > </ body > </ html >

 2：kind.htm页面用panel包含：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

< script  type="text/javascript">      var editor;      $(function() {            window.setTimeout(function() {              editor = KindEditor.create('#note', {                  width : '680px',                  height : '300px',                  items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink' ],                  uploadJson : '/fileController/upload',                  fileManagerJson : '/fileController/fileManage',                  allowFileManager : true              });          }, 1); });        </ script > < div   class="easyui-panel" title="My Panel" style="height:700px;"            data-options="noheader:true,fit:true,height:700">       < div  class="easyui-layout" data-options="fit:true,border:false">          < div  data-options="region:'center',border:false" title="" style="overflow: hidden;">              < form  id="form" method="post">              < table  class="table table-hover table-condensed">                  < tr >                      < th >                          编号                      </ th >                      < td >                          < input  name="id" type="text" class="span2" value="8c130179-b86d-4da2-9028-f819619216ff"                              readonly="readonly">                      </ td >                      < th >                          BUG名称                      </ th >                      < td >                          < input  name="name" type="text" placeholder="请输入BUG名称" class="easyui-validatebox span2"                              data-options="required:true" value="zsdcasdasdasd">                      </ td >                  </ tr >                  < tr >                      < th >                          BUG类型                      </ th >                      < td >                          < select  name="typeId" class="easyui-combobox" data-options="width:140,height:29,editable:false,panelHeight:'auto'">                              < option  value="0">错误</ option >                              < option  value="1" selected="selected">功能</ option >                          </ select >                      </ td >                      < th >                          浏览服务器附件                      </ th >                      < td >                          < button  type="button" class="btn" onclick="fileManage();">                              浏览服务器</ button >                      </ td >                  </ tr >                  < tr >                      < th >                          BUG描述                      </ th >                      < td  colspan="3">                          < textarea  name="note" id="note" cols="50" rows="5">kindeditor</ textarea >                      </ td >                  </ tr >              </ table >              </ form >          </ div >      </ div > </ div >