首页 > 代码库 > 09. easyui-tabs 配合 iframe 使用，请求两次等问题

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

2024-11-16 05:37:39   203人阅读

描述

    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="http://www.mamicode.com/equip_manager_vidicon.html" frameborder="0" height=100% width=100% ></iframe> -->
              </div>
              <div id="tt1" title="扫码设备管理">
                  <!-- <iframe src="http://www.mamicode.com/system/park_scancode_show_info.html" frameborder="0" height=100% width=100%></iframe> -->
              </div>
              <div id="tt2" title="刷卡设备管理">
                  <!-- <iframe src="http://www.mamicode.com/swingCardEquipManager.html" frameborder="0" height=100% width=100%></iframe> -->
              </div>
              <div id="tt3" title="打印设备管理">
                   <!-- <iframe src="http://www.mamicode.com/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="http://www.mamicode.com/equip_manager_vidicon.html" frameborder="0" height=100% width=100% ></iframe>‘;
              case 1:return ‘<iframe src="http://www.mamicode.com/system/park_scancode_show_info.html" frameborder="0" height=100% width=100%></iframe>‘;
              case 2:return ‘<iframe src="http://www.mamicode.com/swingCardEquipManager.html" frameborder="0" height=100% width=100%></iframe>‘;
              case 3:return ‘<iframe src="http://www.mamicode.com/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

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


联系
我们