本教程讲解如何利用JavaScript编写代码，使弹出的新窗口能够与主窗口交互，具体介绍实现从子窗口向父窗口传递数据的方法和步骤。 在JavaScript中，弹出子窗口并传递值给父窗口是一个常见的需求，在构建交互式的Web应用时尤为常见。这个过程可以通过使用`window.open()`或`window.showModalDialog()`函数来实现。 首先来看一下父窗口的代码：这里假设有一个HTML页面（名为First），包含一个按钮（Button1）和一个文本框（TextBox1）。当用户点击该按钮，会调用ShowDialog() 函数，并打开子窗口(second.aspx)： ```javascript function ShowDialog(Url){ var iWidth = 560; // 模态对话框宽度 var iHeight = 300; // 模态对话框高度 var iTop = (window.screen.height - iHeight - 100)/2; var iLeft = (window.screen.width -iWidth)/2; window.showModalDialog(Url, newWindow,'dialogHeight: '+iHeight+'px; dialogWidth: '+iWidth+'px; toolbar:no; menubar:no; scrollbars:no; resizable:no; location:no; status=no;left:'+iLeft+'px;top:'+iTop+'px;'); document.getElementById('TextBox1').innerText = window.returnValue; } ``` `ShowDialog()`函数设置了子窗口的大小、位置和样式，并通过`window.showModalDialog()`打开该对话框。此方法返回值会被赋给父页面中的文本框，从而实现数据从子窗口到父窗口的传递。 对于子窗口（如second.aspx或second.html），通常包含用户交互元素，在这个例子中是多选框（myRadio）。在关闭之前，需要将用户的输入作为`window.returnValue`发送回父窗口： ```javascript function closeDiag() { window.opener = null; window.close(); } function OK(){ var Value=document.getElementsByName('myRadio'); for(var i=0; i<Value.length;i++){ if(Value[i].checked){ window.returnValue=Value[i].value; break; } else{ document.getElementById('Lab_Info').innerText='没有选中项,请选择！'; } } } ``` 在`OK()`函数里，我们遍历所有名为myRadio的多选项框。如果找到被选择的那个，则设置其值为 `window.returnValue` 并关闭窗口；否则会显示一个提示信息。 值得注意的是，由于浏览器对 `window.showModalDialog()` 方法的支持已逐渐减少或完全不支持该方法，在现代网页开发中建议使用更先进的技术实现跨窗口通信功能。例如可以采用`window.open()`配合`window.postMessage()`来替代以上的方法。 总结一下： 1. 在父页面定义一个函数用于打开子窗口，并设置回调以接收返回值； 2. 子页面需要包含用户交互元素，当点击提交或确认按钮时将收集到的信息作为 `window.returnValue` 返回给父页； 3. 父窗体监听该返回信息并更新界面。 为了确保在不同的浏览器中都能正常工作，请考虑使用更现代的方法如`window.open()`和`window.postMessage()`来替代过时的`showModalDialog()`, 并且需要对各种浏览器进行充分测试以保证良好的用户体验。
5星
