`
Flory
  • 浏览: 24735 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

父子窗口间传值

 
阅读更多
  1. 父窗口：
  3. url = url + '?winFlg=aaa&winPig=bbb';
  5. window.open(url, '', '');
  7. 子窗口：
  9. var URLParams = new Object();
  10. var aParams = document.location.search.substr(1).split('&');
  11. for (var i=0; i < aParams.length; i++) {
  12. var aParam = aParams[i].split('=');
  13. URLParams[aParam[0]] = aParam[1];
  14. }
  16. alert(URLParams["winFlg"]);
  18. alert(URLParams["winPig"]);
  20. ==================================================================================
  22. 打开一个新窗口，该子窗口调用父对象的方法或变量，这个问题一直没有搞清楚。网上找了些资料，总结一下：
  24. 打开新窗口一般有几种方法，window.open(...),window.showModalDialog(...)，以及iframe中嵌套页面这里也一起研究吧，另外还有window.navigate(...)、window.location.href="..."、window.history.back(-1);都是实现同意页面内容跳转的，这里不讨论。
  26. 1、open子窗口：用window.opener代表父窗口的window对象
  28. 2、模态子窗口：间接通过传window对象到子窗口，然后子窗口可获得父窗口的window对象
  30. 3、iframe中子页面：用window.parent代表父窗口的window对象
  33. 父页面：1.htm 代码:
  35. <html>
  36. <head>
  37. <title>打开父子窗口传值研究-父窗口</title>
  39. <script >
  40. var parValue="现在显示了父窗口中的变量值";
  42. function test(){
  43. alert("现在显示了父窗口中的方法正常执行");
  44. }
  46. </script>
  47. </head>
  48. <body >
  49. <input type="button" id="mybutton1" value="打开open新窗口" onclick="window.open('2.htm');">
  50. <input type="button" id="mybutton2" value="打开modal窗口" onclick="window.showModalDialog('3.htm',window);" >
  51. <br>
  52. <iframe id="subiframe" name="subiframe" src="4.htm" scrolling="auto" frameborder="1" ></iframe>
  53. </body>
  54. </html>
  57. 2.htm 代码：
  59. <html>
  60. <head>
  61. <title>打开父子窗口传值研究-open打开子窗口</title>
  62. <script>
  63. var buttonValue=window.opener.document.getElementById("mybutton2").value //获取父窗口中的对象
  64. var parentValue=window.opener.parValue; //获取父窗口中的变量
  66. function doParTest(){
  67. window.opener.test(); //调用父窗口中的方法
  69. }
  70. </script>
  71. </head>
  72. <body>
  74. <input type="button" value="open打开子窗口按钮" onclick="alert('buttonValue:'+buttonValue);alert('parentValue:'+parentValue);doParTest()">
  76. </body>
  77. </html>
  80. 3.htm 代码：
  82. <html>
  83. <head>
  84. <title>打开父子窗口传值研究-打开modal子窗口</title>
  85. <script>
  86. var parentWin=window.dialogArguments;
  87. var buttonValue=parentWin.document.getElementById("mybutton2").value //获取父窗口中的对象
  88. var parentValue=parentWin.parValue; //获取父窗口中的变量
  89. function doParTest(){
  90. parentWin.test(); //调用父窗口中的方法
  91. }
  92. </script>
  93. </head>
  95. <body bgcolor="#FFFFFF" text="#000000">
  97. <input type="button" value="modal子窗口按钮" onclick="alert('buttonValue:'+buttonValue);alert
  99. ('parentValue:'+parentValue);parentWin.test();">
  100. </body>
  101. </html>
  104. 4.htm 代码：
  106. <html>
  107. <head>
  108. <title>打开父子窗口传值研究-iframe中子窗口</title>
  109. <script>
  110. var buttonValue=window.parent.document.getElementById("mybutton2").value //获取父窗口中的对象
  111. var parentValue=window.parent.parValue; //获取父窗口中的变量
  113. function doParTest(){
  114. window.parent.test(); //调用父窗口中的方法
  115. }
  116. </script>
  117. </head>
  118. <body>
  120. <input type="button" value="iframe中子窗口按钮" onclick="alert('buttonValue:'+buttonValue);alert('parentValue:'+parentValue);doParTest()">
  122. </body>
  123. </html> 
父窗口：

url = url + '?winFlg=aaa&winPig=bbb';

window.open(url, '', '');

子窗口：

var URLParams = new Object();
var aParams = document.location.search.substr(1).split('&');
for (var i=0; i < aParams.length; i++) {
    var aParam = aParams[i].split('=');
     URLParams[aParam[0]] = aParam[1];
}

alert(URLParams["winFlg"]);

alert(URLParams["winPig"]);

==================================================================================

打开一个新窗口，该子窗口调用父对象的方法或变量，这个问题一直没有搞清楚。网上找了些资料，总结一下：

打开新窗口一般有几种方法，window.open(...),window.showModalDialog(...)，以及iframe中嵌套页面这里也一起研究吧，另外还有window.navigate(...)、window.location.href="..."、window.history.back(-1);都是实现同意页面内容跳转的，这里不讨论。

1、open子窗口：用window.opener代表父窗口的window对象

2、模态子窗口：间接通过传window对象到子窗口，然后子窗口可获得父窗口的window对象

3、iframe中子页面：用window.parent代表父窗口的window对象


父页面：1.htm    代码:

<html>
<head>
<title>打开父子窗口传值研究-父窗口</title>

<script >
var parValue="现在显示了父窗口中的变量值";

function test(){
alert("现在显示了父窗口中的方法正常执行");
}

</script>
</head>
<body >
<input type="button" id="mybutton1"    value="打开open新窗口"    onclick="window.open('2.htm');">
<input type="button" id="mybutton2"    value="打开modal窗口"    onclick="window.showModalDialog('3.htm',window);" >
<br>
<iframe id="subiframe"    name="subiframe"     src="4.htm" scrolling="auto" frameborder="1" ></iframe>
</body>
</html>


2.htm 代码：

<html>
<head>
<title>打开父子窗口传值研究-open打开子窗口</title>
<script>
var buttonValue=window.opener.document.getElementById("mybutton2").value //获取父窗口中的对象
var parentValue=window.opener.parValue;       //获取父窗口中的变量

function doParTest(){
window.opener.test();        //调用父窗口中的方法

}
</script>
</head>
<body>

<input type="button" value="open打开子窗口按钮" onclick="alert('buttonValue:'+buttonValue);alert('parentValue:'+parentValue);doParTest()">

</body>
</html>


3.htm 代码：

<html>
<head>
<title>打开父子窗口传值研究-打开modal子窗口</title>
<script>
var parentWin=window.dialogArguments;
var buttonValue=parentWin.document.getElementById("mybutton2").value   //获取父窗口中的对象
var parentValue=parentWin.parValue;       //获取父窗口中的变量
function doParTest(){
parentWin.test();        //调用父窗口中的方法
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<input type="button" value="modal子窗口按钮" onclick="alert('buttonValue:'+buttonValue);alert

('parentValue:'+parentValue);parentWin.test();">
</body>
</html>


4.htm    代码：

<html>
<head>
<title>打开父子窗口传值研究-iframe中子窗口</title>
<script>
var buttonValue=window.parent.document.getElementById("mybutton2").value //获取父窗口中的对象
var parentValue=window.parent.parValue;       //获取父窗口中的变量

function doParTest(){
window.parent.test();        //调用父窗口中的方法
}
</script>
</head>
<body>

<input type="button" value="iframe中子窗口按钮" onclick="alert('buttonValue:'+buttonValue);alert('parentValue:'+parentValue);doParTest()">

</body>
</html>



下面是自己写了一个测试例子:
test1:

Java代码 复制代码 收藏代码
  1. <input type="text" id="txt">
  2. <div style="float:left;" id="div" ></div>
  3. <input type="button" value="open" onClick="openWindow()">
  5. <script>
  6. function openWindow(){
  8. var result=window.showModalDialog("test2.html",window);
  9. alert(result);
  10. var arr = result.split('_');
  11. var arrCodes = arr[0].split(',');
  12. var arrNames = arr[1].split(',');
  13. document.getElementById('txt').value=arr[1];
  15. var innerH = '';
  16. for(var i=0;i<arrCodes.length-1;i++){
  17. innerH+='<input type=\"text\" name=\"old\" value=\"'+arrCodes[i]+'\" />'
  18. }
  19. document.getElementById('div').innerHTML=innerH;
  21. }
  22. </script> 
<input type="text" id="txt">
<div style="float:left;" id="div" ></div>
<input type="button" value="open" onClick="openWindow()">

<script>
function openWindow(){

  var result=window.showModalDialog("test2.html",window);
	alert(result);
  var arr = result.split('_');
  var arrCodes = arr[0].split(',');
  var arrNames = arr[1].split(',');
  document.getElementById('txt').value=arr[1];
  
  var innerH = '';
  for(var i=0;i<arrCodes.length-1;i++){
  	innerH+='<input type=\"text\" name=\"old\" value=\"'+arrCodes[i]+'\" />'
  }
  document.getElementById('div').innerHTML=innerH;
  
}
</script>



test2:

Java代码 复制代码 收藏代码
  4. <html>
  5. <head>
  6. <script>
  8. function onload(){
  10. var parentWin = window.dialogArguments;
  11. var obj = parentWin.document.getElementsByName('old');
  12. var oldValues = new Array();
  13. for(var i=0;i<obj.length;i++){
  14. oldValues[i]=obj[i].value;
  15. }
  17. var obj = document.getElementsByName('selectValues');
  18. for(var i = 0;i<obj.length;i++){
  19. for(var j=0;j<oldValues.length;j++){
  20. if(obj[i].value == oldValues[j])
  21. { obj[i].checked='checked';}
  22. }
  24. }
  25. }
  28. function ok(){
  30. var industryCodes = new Array();
  31. var industryNames = new Array();
  33. var tmpCodes = '';
  34. var tmpNames = '';
  35. var codes = document.getElementsByName("selectValues");
  36. var names = document.getElementsByName("selectNames");
  38. for(var i =0 ,j=0 ; i <codes.length;i++){
  39. if(codes[i].checked){
  40. tmpCodes += codes[i].value+',';
  41. tmpNames += names[i].value+',';
  42. j++;
  43. }
  44. }
  46. var tmpValue =tmpCodes+'_'+tmpNames;
  48. window.returnValue = tmpValue;
  49. window.close();
  50. }
  51. </script>
  52. </head>
  54. <body onload="onload()">
  55. <input type="text" id="test1" value="" />
  56. <input type="checkbox" name="selectValues" value="1" />文本1<input type="hidden" name="selectNames" value="文本1" />
  57. <br>
  58. <input type="checkbox" name="selectValues" value="2" />文本2<input type="hidden" name="selectNames" value="文本2" />
  59. <br>
  60. <input type="checkbox" name="selectValues" value="3" />文本3<input type="hidden" name="selectNames" value="文本3" />
  61. <br>
  62. <input type="button" onclick="ok()" />
  63. </body>
  64. </html>
分享到：
| StringBuffer
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    父子窗口间传值、CListCtrl隔行变色

    最后，父子窗口间的数据传递是一个重要的设计概念。在MFC中，通常使用消息、成员变量或者事件通知来实现。例如，子窗口可以通过发送自定义消息（使用SendMessage或PostMessage函数）给父窗口，携带需要传递的数据。...

    QT父子窗口相互传值

    "QT父子窗口相互传值"这个主题，主要涉及Qt框架中如何有效地实现这种通信机制。本篇文章将详细探讨Qt窗口之间传递数据的方法和技巧，对初学者来说尤其具有指导意义。 首先，让我们理解Qt中的窗口对象关系。在Qt中，...

    pyqt父子窗口相互传值

    "pyqt父子窗口相互传值"这个主题就是关于如何在不同的QMainWindow或QWidget实例之间传递数据。下面将详细讲解这个过程，并提供一个可能的实现方式。 首先，我们需要理解PyQt中的窗口层次结构。在PyQt5中，窗口通常...

    C#实现父子窗体全传值案例

    总之，"C#实现父子窗体全传值案例"涵盖了窗口交互、模态对话框使用以及数据传递等多个关键点，这些都是在开发C#桌面应用程序时不可或缺的知识。通过深入理解并实践这些概念，开发者能够构建更加灵活和健壮的应用程序...

    window.open父子窗口传值问题

    当我们谈论“window.open父子窗口传值问题”，我们指的是在父窗口通过`window.open`创建了一个子窗口，并需要在两者之间进行数据通信的情况。 首先，让我们了解一下`window.open`的基本语法： ```javascript var ...

    动态增删table以及后台传值和弹出窗口父子窗口传值

    弹出窗口父子窗口传值主要指的是在Web应用中打开新窗口或弹出对话框时，两个窗口之间数据的交换。在JavaScript中，可以使用window.open()函数创建新窗口，并通过window对象的属性（如opener或parent）来访问父窗口或...

    两个窗口传值

    在IT领域，尤其是在软件开发中，"两个窗口传值"通常指的是在两个应用程序窗口或同一应用程序中的两个界面之间交换数据的过程。这个问题涉及到进程通信、跨线程通信等复杂概念，这些是多任务操作系统中实现不同组件间...

    javascript 父窗口、子窗口传值问题

    在JavaScript编程中，父窗口与子窗口之间的通信是一种常见的需求，特别是在构建多...在实际应用中，根据场景和安全性要求选择合适的方法进行父子窗口间的通信。同时，要确保遵循同源策略，因为跨域通信可能会受到限制。

    js操作模态窗口及父子窗口间相互传值示例

    父子窗口间的相互传值是Web开发中经常遇到的一个需求，尤其当模态窗口被用作子窗口时。本文将详细介绍如何使用JavaScript来操作模态窗口，并实现父子窗口之间的数据传递。 首先，我们要了解什么是模态窗口以及如何...

    asp.net 父子页面传值

    本文将深入探讨如何在ASP.NET环境中实现父子页面间的值传递，并分享一些实用的技术和策略。 首先，我们要了解ASP.NET页面生命周期的基础知识。每个ASP.NET页面都有自己的生命周期，包括初始化、加载事件、验证、...

    python Qt5GUI界面主窗口和子窗口相互传值，保证能用

    在Qt设计中，窗口间通信通常是通过信号（Signals）和槽（Slots）机制进行的，这是一种事件驱动的编程模式。 1. **信号和槽的概念** - **信号（Signals）**：当某个事件发生时，Qt对象会发出一个信号。例如，当用户...

    JS简单实现父子窗口传值功能示例【未使用iframe框架】

    本文实例讲述了JS简单实现父子窗口传值功能。分享给大家供大家参考，具体如下： 父窗口页面father.html &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&...

    Qt--子窗口向父窗口传值

    2. **父子窗口关系**： - 在Qt中，`QMainWindow`通常作为主窗口，而其他如`QWidget`或自定义窗口类可以作为子窗口或对话框。 - 子窗口通常是模态或非模态的，它们可以在主窗口之上弹出，并在完成任务后关闭。 3. ...

    [C# 窗体间传值_共6种方法_低中高级实现方法

    在C#编程中，窗口间的数据传递是一项基本且重要的任务，尤其在开发多窗口应用程序时。SongQz编写的这篇文章汇总了六种不同级别的方法，从初级到高级，旨在帮助开发者掌握各种技巧，确保在不同窗口之间有效地交换数据...

    iframe父子传值

    然而，当涉及到`iframe`中的父子窗口间通信时，开发者可能会遇到一些挑战。本文将详细介绍如何在`iframe`的父窗体与子窗体之间进行数据传递。 ### 1. 同源策略与跨域限制 首先，我们需要了解浏览器的安全机制——...

    ie+FF通用的父子模态对话框相互传值

    总的来说，实现"ie+FF通用的父子模态对话框相互传值"涉及到JavaScript的事件处理、跨窗口通信和CSS的模态设计。理解这些知识点并熟练运用，能帮助开发者创建出更好的交互体验。同时，要时刻关注浏览器的兼容性和最佳...

    父子窗口传值window.showModalDialog以及window.open用法简介

    window.showModalDialog以及window.open用法简介

Magicbox
Global site tag (gtag.js) - Google Analytics