JS中showModalDialog关闭子窗口刷新主窗口用法详解

在网页开发中，我们常常需要利用JavaScript来展示模态对话框（showModalDialog）。这种方法不仅可以吸引用户的注意力，还能实现一些特定的功能，比如关闭子窗口并刷新主窗口。接下来，让我们一起如何使用showModalDialog方法实现这些功能。

我们来了解一下showModalDialog和showModelessDialog之间的区别。showModalDialog打开的对话框会一直保持输入焦点，直到对话框被关闭，用户无法切换到主窗口，类似于alert的效果。而showModelessDialog打开的对话框则允许用户随机切换输入焦点，对主窗口的影响较小。

为了让超链接在showModalDialog和showModelessDialog中不弹出新窗口，我们可以使用标签。将这段标签放在之间即可生效。

关于如何刷新showModalDialog和showModelessDialog中的内容，我们可以借助JavaScript。由于在这些对话框中无法直接按F5刷新，也无法弹出菜单，我们可以通过编写一段JavaScript代码来实现刷新功能。具体做法是在网页中加入一段代码，配合使用，按下F5即可刷新页面。

对于如何关闭通过showModalDialog（或showModelessDialog）打开的窗口，我们可以使用window.close()方法。同样地，也需要配合使用，否则可能会打开一个新的IE窗口。

我们来一下如何在showModalDialog和showModelessDialog中进行数据传递。数据传递是这些对话框的一个重要功能。我们可以通过将变量作为参数传递给这些方法，然后在对话框中读取和设置这些变量。当需要操作多个变量时，这种传递方式可能会受到限制。为了解决这个问题，我们可以考虑使用其他方法，比如使用全局变量或者在对话框中使用更复杂的JavaScript数据结构来存储和传递数据。

六大要点：传递信息、操作变量与多个对话框的互动

让我们一种建议的传递方式。通过 `window.showModalDialog("filename.htm", window)`，我们可以实现信息的有效传递。不论需要操作何种变量，只需直接传递主窗口的 `window` 对象即可。

当我们谈及 `showModalDialog`（或 `showModelessDialog`）的读取和设置时，有一种简洁明了的方式值得我们关注。例如，通过 `alert(window.dialogArguments.var_name)` 我们可以轻松读取 `var_name` 变量的值。同样，设置该变量也仅需一行代码：`window.dialogArguments.var_name="oyiboy"`。

我们还可以操作 `var_id` 变量，方法同样简单明了。使用 `alert(window.dialogArguments.var_id)` 进行读取，而设置其值则为 `window.dialogArguments.var_id="001"`。

不仅如此，我们还能对主窗口中的任何对象进行操作，包括表单里的元素。例如，通过 `window.dialogArguments.form1dex1.value="这是在设置index1元素的值"` 这行代码，我们可以轻松设置表单元素的值。

接下来，让我们深入一个实际应用场景：多个 `showModelessDialog` 的相互操作。直接通过代码来展示会更加直观。通过主文件的 JavaScript 代码，我们首先打开一个名为“控制.htm”的对话框和一个空白对话框。而“控制.htm”中的脚本则负责操作这些对话框的位置。因为窗口的位置数据是以像素值形式存在的，所以我们需要一个特殊函数来处理这些位置数据。

这种方式不仅使操作变得简单直观，而且使得多个对话框之间的交互变得更加灵活和方便。无论是传递信息、操作变量还是实现多个对话框的互动，这种方式都展现出了其高效和实用的特点。

动态调整窗口位置大小功能的实现

让我们来看一下这段代码：

```javascript

function countNumber(numberStr, action) {

// 将字符串中的 'px' 替换为空字符串并转换为数字

numberStr = numberStr.replace('px', '').valueOf(); // 使用valueOf确保转换为数字类型

switch (action) {

case "-": // 减少数值用于上移或左移等操作

numberStr -= 10;

break;

case "+": // 增加数值用于下移或右移等操作

numberStr += 10;

break;

}

return numberStr + "px"; // 返回带有单位 'px' 的字符串格式结果

}

```

这段代码定义了一个名为 `countNumber` 的函数，用于处理窗口位置的调整。根据传入的动作参数（增加或减少），该函数会相应地调整数值并返回带有单位的新值。这对于动态调整窗口的位置非常有用。接下来是几个按钮的示例，通过点击按钮可以调用这个函数来调整窗口的位置。

接下来，让我们关注窗口命名方式和变量访问方式的部分：

```javascript

// 使用showModelessDialog打开一个新窗口并设置初始位置与大小等属性

var s1 = showModelessDialog('控制.htm', window, "dialogTop:1px;dialogLeft:1px");

```

这部分代码展示了如何使用 `showModelessDialog` 方法打开一个模态对话框，并为其设置位置和大小等属性。通过这个方式，可以在不同 `showModelessDialog` 打开的窗口之间相互控制各自的显示页面，传递变量和数据等。这是一个非常实用的功能。接下来，我们来看一个关于关闭当前窗口并重新加载父窗口的代码示例：

```javascript