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

最新推荐文章于 2025-10-05 13:16:32 发布

原创最新推荐文章于 2025-10-05 13:16:32 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

JAVA 专栏收录该内容

85 篇文章

订阅专栏

本文介绍了一种解决弹窗内容滞留的方法，通过在显示弹窗前刷新弹窗页面来更新显示内容。该方法适用于使用iframe加载弹窗的情况。

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

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

具体步骤如下：

第一步：写一个主页面：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>
    <!-- 引用easyUi的文件 -->
    <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>

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

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

绝对原创！