09. easyui-tabs 配合 iframe 使用，请求两次等问题

Posted 2020-10-01

描述

1. 需要把已经做好的几个设备管理页面。转为子菜单管理；直接使用 easyui-tabs 配合 iframe 是最省时省力的。
   

存在问题

1. 当点击 “设备管理” 会出现子页面多次加载情况，而且被cancel掉
2. 更主要的主要的问题，当点击子菜单时，iframe 并不是直接撑满整个tab页面，也设置了100%，但是无效果。进而导致easyui dialog 弹出时跑到左上角去.

解决办法

1. html code
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   <div data-options="region:‘center‘,border:false">     <div id="tt" class="easyui-tabs" data-options="fit:true">         <div id="tt0" title="摄像机管理">             <!-- <iframe src="equip_manager_vidicon.html" frameborder="0" height=100% width=100% ></iframe> -->         </div>         <div id="tt1" title="扫码设备管理">             <!-- <iframe src="../system/park_scancode_show_info.html" frameborder="0" height=100% width=100%></iframe> -->         </div>         <div id="tt2" title="刷卡设备管理">             <!-- <iframe src="swingCardEquipManager.html" frameborder="0" height=100% width=100%></iframe> -->         </div>         <div id="tt3" title="打印设备管理">              <!-- <iframe src="park_receipt_print_info.html" frameborder="0" height=100% width=100%></iframe> -->         </div>     </div> </div>

   最初是直接在每个tab下面，添加的 iframe，会出现如前面描述的问题。
2. js code
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   equip_manager.switchPage = function(value){     switch (value) {         case 0:return ‘<iframe src="equip_manager_vidicon.html" frameborder="0" height=100% width=100% ></iframe>‘;         case 1:return ‘<iframe src="../system/park_scancode_show_info.html" frameborder="0" height=100% width=100%></iframe>‘;         case 2:return ‘<iframe src="swingCardEquipManager.html" frameborder="0" height=100% width=100%></iframe>‘;         case 3:return ‘<iframe src="park_receipt_print_info.html" frameborder="0" height=100% width=100%></iframe>‘;     } } $(function() {     $(‘#tt‘).tabs({         onSelect : function(title, index) {             if($("#tt" + index).children().length == 0){                 $("#tt" + index).html(equip_manager.switchPage(index));             }         }     });           $("#tt0").html(equip_manager.switchPage(0)); });

   这里我修改成动态加载，至少这么做，解决了我遇到的上述2个问题.

 

2017年8月3日 17:09:16