easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

时间：2023-03-09 04:28:29
easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

<!-- 父页面 -->

  1. <!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>父页面</title>
  6. <!-- 引用easyUi的文件 -->
  7. <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
  8. <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
  9. <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
  10. <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
  11. <!-- 国际化 -->
  12. <script type="text/javascript" src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
  13. </head>
  14. <body>
  15. <a href="javascript:void(0)" onclick="openWin();">点击打开隐藏的window窗口</a>
  16. <!--隐藏的文本框-->
  17. <div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" closed="true"
  18. data-options="iconCls:'icon-save',modal:true">
  19. <div data-options="region:'north',title:'North Title',split:true" style="height:50px;">
  20. <a href="javascript:void(0)" onclick="wen('son.html')">子页面son.html</a>
  21. <input type="button" value="给子页面赋值" onclick="assgVal();" />
  22. <input type="text" name="fatherId" id="fatherId" value="父页面的文本框" /> <br/>
  23. <input type="text" name="fatherText" id="fatherText" value="给子页面赋的值!" />
  24. </div>
  25. <div id="centers" data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;height:90%">
  26. 引用外部html文件
  27. </div>
  28. </div>
  29. <script type="text/javascript">
  30. //打开隐藏的win窗口
  31. function openWin(){
  32. $("#win").window("open");
  33. }
  34. //给子页面的文本框赋值
  35. function assgVal(){
  36. var fatherText = $("#fatherText").val();
  37. $('#son').contents().find("#sonId").val(fatherText);
  38. }
  39. /* 引用子页面index1.html */
  40. function wen(src){
  41. var hrefs = "<iframe id='son' src='" + src + "' allowTransparency='true' style='border:0;width:99%;height:99%;padding-left:2px;' frameBorder='0'></iframe>";
  42. $("#centers").html(hrefs);
  43. }
  44. //关闭window窗口
  45. function closeWin(){
  46. $("#win").window("close");
  47. }
  48. </script>
  49. </body>
  50. </html>

<!-- 子页面 -->

  1. <!DOCTYPE html PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN" "http:/www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>子页面</title>
  5. <!-- 引用easyUi的文件 -->
  6. <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
  7. <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
  8. <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
  9. <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
  10. <!-- 国际化 -->
  11. <script type="text/javascript" src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
  12. </head>
  13. <body>
  14. <h1>你好,这是子页面</h1>
  15. <input type="text" name="sonId" id="sonId" value="" /><br/>
  16. <input type="text" name="sonText" id="sonText" value="给父页面的文本框赋值" />
  17. <button onclick="farassgVal();">给父页面的文本框赋值</button>
  18. </body>
  19. <script type="text/javascript">
  20. //调用父页面的赋值方法
  21. $(window.parent.assgVal());
  22. $(function(){
  23. alert($("#sonId").val());
  24. //调用父页面的关闭win窗口的方法
  25. //window.parent.closeWin();
  26. });
  27. //给父页面的文本框赋值
  28. function farassgVal(){
  29. var sonText = $("#sonText").val();
  30. $(window.parent.$("#fatherId").val(sonText));
  31. }
  32. </script>
  33. </html>

第一:

easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

第二:

easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

第三:

easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

第四:

easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

第五:

easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

代码下载地址: