绝对原创,转载时,请注明。
先写结论:在弹窗之前刷新弹窗就可以了。
具体步骤如下:
第一步:写一个主页面: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>
小结:在弹窗数据传递的策略上实验了很久,本来想在弹窗中执行主页面的函数的,但由于主面的函数有参数,在弹窗中读不到,所以就改为,由主页面将弹窗数据生成好,然后由弹窗页面去读取;
后来又碰到每次打开弹窗时,总是第一个数据,郁闷了很久,才找到是要在弹窗之前刷新弹窗。
绝对原创!