使用easyUI的彈窗時，總是顯示第一次彈出一的內容的解決辦法
阿新 • • 發佈：2018-11-11
絕對原創，轉載時，請註明。
先寫結論：在彈窗之前重新整理彈窗就可以了。
具體步驟如下：
第一步：寫一個主頁面：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>小結：在彈窗資料傳遞的策略上實驗了很久，本來想在彈窗中執行主頁面的函式的，但由於主面的函式有引數，在彈窗中讀不到，所以就改為，由主頁面將彈窗資料生成好，然後由彈窗頁面去讀取；
後來又碰到每次開啟彈窗時，總是第一個資料，鬱悶了很久，才找到是要在彈窗之前重新整理彈窗。
絕對原創！