使用JavaScript实现向父窗口传递值的弹出子窗口功能
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
本教程讲解如何利用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
全部评论 (0)
