easyUi彈出window視窗傳值與呼叫父頁面的方法,子頁面給父頁面賦值
阿新 • • 發佈：2019-01-24
<!-- 父頁面 -->
<!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/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css"> <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script> <!-- 國際化 --> <script type="text/javascript" src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script> </head> <body> <a href="javascript:void(0)" onclick="openWin();">點選開啟隱藏的window視窗</a> <!--隱藏的文字框--> <div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" closed="true" data-options="iconCls:'icon-save',modal:true"> <div data-options="region:'north',title:'North Title',split:true" style="height:50px;"> <a href="javascript:void(0)" onclick="wen('son.html')">子頁面son.html</a> <input type="button" value="給子頁面賦值" onclick="assgVal();" /> <input type="text" name="fatherId" id="fatherId" value="父頁面的文字框" /> <br/> <input type="text" name="fatherText" id="fatherText" value="給子頁面賦的值!" /> </div> <div id="centers" data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;height:90%"> 引用外部html檔案 </div> </div> <script type="text/javascript"> //開啟隱藏的win視窗 function openWin(){ $("#win").window("open"); } //給子頁面的文字框賦值 function assgVal(){ var fatherText = $("#fatherText").val(); $('#son').contents().find("#sonId").val(fatherText); } /* 引用子頁面index1.html */ function wen(src){ var hrefs = "<iframe id='son' src='" + src + "' allowTransparency='true' style='border:0;width:99%;height:99%;padding-left:2px;' frameBorder='0'></iframe>"; $("#centers").html(hrefs); } //關閉window視窗 function closeWin(){ $("#win").window("close"); } </script> </body> </html>
<!-- 子頁面 -->
<!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>子頁面</title> <!-- 引用easyUi的檔案 --> <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css"> <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script> <!-- 國際化 --> <script type="text/javascript" src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script> </head> <body> <h1>你好,這是子頁面</h1> <input type="text" name="sonId" id="sonId" value="" /><br/> <input type="text" name="sonText" id="sonText" value="給父頁面的文字框賦值" /> <button onclick="farassgVal();">給父頁面的文字框賦值</button> </body> <script type="text/javascript"> //呼叫父頁面的賦值方法 $(window.parent.assgVal()); $(function(){ alert($("#sonId").val()); //呼叫父頁面的關閉win視窗的方法 //window.parent.closeWin(); }); //給父頁面的文字框賦值 function farassgVal(){ var sonText = $("#sonText").val(); $(window.parent.$("#fatherId").val(sonText)); } </script> </html>
第一:
第二:
第三:
第四:
第五:
程式碼下載地址:
下載即可用!!!