jQuery MiniUI

标题: tabs addTab时会重复触发tabload事件 [打印本页]

作者: guatianshuileng    时间: 2023-10-24 16:23:58     标题: tabs addTab时会重复触发tabload事件

本帖最后由 guatianshuileng 于 2023-11-27 17:18 编辑

tabs添加并打开一个tab时,tabload事件会重复触发,触发次数是历史打开次数,请问是什么原因,代码如下:
  1. function openHistData(data) {
  2.     let row = grid.getSelected();
  3.     let tabs = window.parent.tabs;
  4.     //打开参数补录页面
  5.     let url = RootPath() + "/prod_operation_data.html";
  6.     if (tabs) {
  7.         let tab = {
  8.             name: 'prodOprationTab',
  9.             title: '参数录入',
  10.             url: url,
  11.             iconCls: 'fa fa-file-text-o',
  12.             showCloseButton: true
  13.         };


  14.         if (tabs.getTab(tab.name)){
  15.             tabs.removeTab(tab.name);
  16.         }

  17.         tab = tabs.addTab(tab);
  18.         tabs.activeTab(tab);

  19.         //tabload事件会被触发多次
  20.          tabs.on("tabload",function(e){
  21.         
  22.              let tab=e.tab;
  23.              var iframe=tabs.getTabIFrameEl(tab);
  24.         
  25.              let row = grid.getSelected();
  26.              let orgId = row.ORG_ID;
  27.              let stationId = row.STATION_ID;
  28.              let dateReport = row.DATE_REPORT;
  29.              let bcCode = row.BC_NAME;
  30.              //跨页面调用tab里面新页面的方法,传参数过去
  31.              iframe.contentWindow.openTab(orgId, stationId, dateReport, bcCode)
  32.          });
  33.     } else {
  34.         window.open(url, "_blank")
  35.     }
  36. }
复制代码


作者: felt    时间: 2023-10-25 14:37:53

这代码提供的不太对吧?
事件如何绑定的贴一下
作者: guatianshuileng    时间: 2023-11-24 16:25:12

felt 发表于 2023-10-25 14:37
这代码提供的不太对吧?
事件如何绑定的贴一下


不好意思,上次发帖后忘记持续关注了,代码已经重新粘贴了,您帮忙解答一下这个问题,谢谢
作者: felt    时间: 2023-11-27 13:33:55

guatianshuileng 发表于 2023-11-24 16:25
不好意思,上次发帖后忘记持续关注了,代码已经重新粘贴了,您帮忙解答一下这个问题,谢谢 ...

初始化的时候会默认加载首页,触发了一次,然后你新增操作的时候新增tab打开,又触发了一次啊.
你说的重复触发是指?
作者: guatianshuileng    时间: 2023-11-27 17:28:59

felt 发表于 2023-11-27 13:33
初始化的时候会默认加载首页,触发了一次,然后你新增操作的时候新增tab打开,又触发了一次啊.
你说的重 ...

我是在当前tab页面1中打开tab页面2,在tabload事件中调用iframe.contentWindow.openTab()方法打开tab页面2中的弹窗,如果我把add的tab页面2关了,在tab页面1再打开tab页面2时,tabload事件中的iframe.contentWindow.openTab()会重复调用,重复次数是之前打开tab页面2的次数,打断点判断是tabload事件重复触发.
作者: felt    时间: 2023-11-27 17:58:03

guatianshuileng 发表于 2023-11-27 17:28
我是在当前tab页面1中打开tab页面2,在tabload事件中调用iframe.contentWindow.openTab()方法打开tab页面2 ...

做个例子吧,可以基于我们试用包里面demo/tabs/load.html改造
作者: guatianshuileng    时间: 2023-11-28 14:31:51

本帖最后由 guatianshuileng 于 2023-11-28 15:44 编辑
felt 发表于 2023-11-27 17:58
做个例子吧,可以基于我们试用包里面demo/tabs/load.html改造

load.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Tabs(懒加载)</title>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />


  6.     <script src="../js/plugins/scripts/boot.js" type="text/javascript"></script>


  7. </head>
  8. <body>
  9. <h1>Tabs(懒加载)</h1>

  10. <input type="button" value="loadTabs" onclick="loadTabs()"/>
  11. <input type="button" value="addTab" onclick="addTab()"/>
  12. <input type="button" value="removeTab" onclick="removeTab()"/>
  13. <input type="button" value="loadTab" onclick="loadTab()"/>
  14. <br />
  15. <div id="tabs1" class="mini-tabs" activeIndex="0" style="width:600px;height:350px;">
  16.     <div title="tab1" url="tab1.html">
  17.         1
  18.     </div>
  19.     <!--<div title="tab2" url="tab2.html">-->
  20.     <!--2-->
  21.     <!--</div>-->
  22. </div>

  23. <script type="text/javascript">
  24.     mini.parse();
  25.     var tabs = mini.get("tabs1");

  26.     function loadTabs() {
  27.         tabs.load("tabs.txt");
  28.     }

  29.     var index = 1;
  30.     function addTab() {
  31.         //add tab
  32.         var i = index++;

  33.         var tab = { title: "tab" + i, url: 'pages/page' + i + '.html', showCloseButton: true };
  34.         tab.ondestroy = function (e) {
  35.             var tabs = e.sender;
  36.             var iframe = tabs.getTabIFrameEl(e.tab);

  37.             //获取子页面返回数据
  38.             var pageReturnData = iframe.contentWindow.getData ? iframe.contentWindow.getData() : "";

  39.             alert(e.tab.removeAction + " : " + pageReturnData);

  40.             //如果禁止销毁的时候,自动active一个新tab:e.autoActive = false;
  41.         }
  42.         tabs.addTab(tab);

  43.         //active tab
  44.         tabs.activeTab(tab);

  45.     }
  46.     function removeTab() {
  47.         var tab = tabs.getActiveTab();
  48.         if (tab) {
  49.             tabs.removeTab(tab);
  50.         }
  51.     }

  52.     function onTabDestroy(e) {
  53.         //alert(e.tab.removeAction);
  54.     }


  55.     function loadTab() {
  56.         var tab = tabs.getActiveTab();
  57.         tabs.loadTab("pages/page1.html", tab);
  58.     }


  59.     tabs.on("beforecloseclick", function (e) {
  60.         if (e.tab.title == "Tab2") {
  61.             alert("Tab2不能关闭");
  62.             e.cancel = true;
  63.         }
  64.     });

  65. </script>
  66. <div class="description">
  67.     <h3>Description</h3>
  68.     <p>
  69.         点击tab页签时,其相关的页面才会被“懒加载”,而且只加载一次。<br />
  70.         Tab1演示了,只要点击就加载,加载多次。
  71.     </p>
  72. </div>
  73. </body>
  74. </html>
复制代码
tab1.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>

  5.     <script src="../js/plugins/scripts/boot.js" type="text/javascript"></script>
  6. </head>
  7. <body>
  8. page1.html<br />
  9. Now:<div id="time"></div><br />
  10. <input type="button" value="Close Tab" onclick="openTab2()"/>
  11. </body>
  12. </html>
  13. <script type="text/javascript">
  14.     mini.parse();

  15.     var time = document.getElementById("time");
  16.     time.innerHTML = new Date().getTime();

  17.     function CloseWindow(action) {
  18.         if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
  19.         else window.close();
  20.     }

  21.     function getData() { return "page1Data"}

  22.     function openTab2(){
  23.         var tabs = window.parent.tabs;
  24.         var tab = { title: "tab2", url: 'tab2.html', name: "tab2" };

  25.         if (tabs.getTab(tab.name)){
  26.             tabs.removeTab(tab.name);
  27.         }

  28.         tabs.addTab(tab);
  29.         tabs.activeTab(tab);

  30.         console.log(tabs.getTabs());
  31.         tabs.on("tabload", function (e) {
  32.             console.log(e.tab.title)
  33.         });
  34.     }



  35. </script>
  36. <script src="../../../scripts/jquery.min.js" type="text/javascript"></script>
  37. <script>

  38.     $(document).on("mousedown", function (event) {
  39.         try {
  40.             var $ = top.jQuery;
  41.             $(top.document).trigger("topmousedown", [document]);
  42.         } catch (ex) {
  43.         }
  44.     });

  45. </script>
复制代码
tab2.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>tab2</title>
  6. </head>
  7. <body>
  8.     tab2
  9. </body>
  10. </html>
复制代码
执行结果:tab1.html的openTab2()方法中
tabs.on("tabload", function (e) {
console.log(e.tab.title)
});触发多次
[attach]13846[/attach]





作者: felt    时间: 2023-11-28 16:25:43

guatianshuileng 发表于 2023-11-28 14:31
load.htmltab1.htmltab2.html
执行结果:tab1.html的openTab2()方法中
tabs.on("tabload", fun ...

你这不是调用一次openTab2就绑定一次tabload事件?这能不多次吗?
作者: guatianshuileng    时间: 2023-11-28 18:32:06

felt 发表于 2023-11-28 16:25
你这不是调用一次openTab2就绑定一次tabload事件?这能不多次吗?

找到原因了,之前也调用un解绑但是没效果,是调用un解绑的方法没有按miniui的格式写,解绑函数里function必须是具体方法名,多谢.




欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2