使用easyUI的弹窗时，总是显示第一次弹出一的内容的解决办法

青旅半醒 2022-05-11 03:56 127阅读 0赞

绝对原创，转载时，请注明。

先写结论：在弹窗之前刷新弹窗就可以了。

具体步骤如下：

第一步：写一个主页面：main.html

<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>父页面</title>
        
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.2/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.2/themes/icon.css">
        <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="jquery-easyui-1.6.2/jquery.easyui.min.js"></script>
        
        <script type="text/javascript" src="jquery-easyui-1.6.2/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript"> 
    
        if(feature.get('text')=='故障指示器'){
        //获得故障指示器的名字
        var s_guZhangName=feature.get('name');
        //测试
        console.log(s_guZhangName);
        //标题
        var biaoTi="故障指示器";
        //tab标签页的标头，即有详情和电流两个tab页面
        var tabHead = [
            {'tab': '详情'},
            {'tab':'电流'}
        ];
        //与页面相对应的内容
        var neiRong = [
            {"nr":s_guZhangName},
            {"nr":"电流情况"}
        ];
        console.log(neiRong[0].nr);
        //因为要在iframe中去建一个TAB标签页的弹窗，所以，得将动态建立的TAB弹窗字符串，全部在主页面建好，然后被弹窗读取。
        //这是个策略问题。
        //s_tabStr是通过tabWindow()动态生成tab页后被iframe中的网页读取的，它必须是全局变量，不能是局部变量，即不加var
        s_tabStr=tabWindow(tabHead,neiRong);//必须为全局变量
        console.log(s_tabStr);
        //在启动弹窗之前，必须刷新弹窗页面，不然弹窗总是出现第一次弹出的内容，很郁闷的！"win"是弹窗中iframe框架的id号。
        window.win.location.reload();
        //启动弹窗
        $("#win").window({
            title:biaoTi,  //标题
            width:700,
            height:550,
            modal:true,
        });
    }
    </script>
    </head>
    <body>
    
    <div id="winpop">
        <iframe id="win" name="win" src="pop_HuQu.html"></iframe>
    </div>
    </html>
    <script type="text/javascript">
    
    /**
     * 功能：动态的在iframe中建立标签页
     * 参数：th是一个json数组，th数组的个数决定标签页的个数；格式：th=[{'tab':'aaa'},{'tab':'bbb'}],aaa,bbb是标签页名
     * 参数：n是一个json数组，是对应th的每页的内容格式：var n=[ {"nr":"内容一"}, {"nr":"内容二"} ];
     * 作者：庭博
     */
    function tabWindow( th, n) {
        var hf = new Array();
        var ar = new Array();
        var tapWindow = '<ul class="nav nav-tabs" role="tablist">';
        for(var i = 0; i < th.length; i++) {
            hf[i] = "#hf" + (i + 1);
            ar[i] = "hf" + (i + 1);
            if(i == 0) {
                tapWindow += '<li role="presentation" class="active">';
            } else {
                tapWindow += '<li role="presentation">';
            }
            tapWindow += '<a href="' + hf[i] + '" aria-controls="' + ar[i] + '" role="tab" data-toggle="tab">' + th[i].tab + '</a>';
            tapWindow += '</li>';
        }
        tapWindow += '</ul>';
        var tabid = new Array();
        tapWindow+='<div class="tab-content">';
        for(var i = 0; i < th.length; i++) {
            tabid[i] = 'neirongId' + (i + 1);
            if(i == 0) {
                tapWindow += '<div role="tabpanel" class="tab-pane active" id="' + ar[i] + '">'+n[i].nr+'</div>';
            } else {
                tapWindow += '<div role="tabpanel" class="tab-pane" id="' + ar[i] + '">'+n[i].nr+'</div>';
            }
        }
        tapWindow+="</div>";
        return tapWindow;
    }
    
    </script>

//===============================================================

第二步、弹窗页面 pop.html

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="renderer" content="ie-stand">
      <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
      <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap-theme.min.css">
      <script src="js/jquery.js" type="text/javascript"></script>
      <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
      <title>此为空文件，内容由程序写入的</title>
      <script type="text/javascript">
    
        $(function () {
            var tabWindow=parent.s_tabStr;//读取主页面中动态生成的TAB标签页。
            $("body").html("");
            $("body").html(tabWindow);
        });
    
      </script>
    </head>
      <body>
      </body>
    </html>

小结：在弹窗数据传递的策略上实验了很久，本来想在弹窗中执行主页面的函数的，但由于主面的函数有参数，在弹窗中读不到，所以就改为，由主页面将弹窗数据生成好，然后由弹窗页面去读取；

后来又碰到每次打开弹窗时，总是第一个数据，郁闷了很久，才找到是要在弹窗之前刷新弹窗。

绝对原创！