在Web软件开发过程中，经常会需要弹出一个窗口，并且在子窗口和父窗口之间通信，并且子窗口要能锁住父窗口。比较常见的是window.showModalDialog()，这种方法有很多局限性，比如窗口之间的通信不方便，只在ie下有效等。如果采用window.open()的方式，子窗口又不能锁住父窗口。网上有许多通过层来屏蔽父窗口的例子，但是也都没能完全锁定父窗口。经过考虑，楼主我决定采用一种变通的办法：锁定父窗口-> 阻止父窗口获得焦点->当父窗口获得焦点时，将焦点转移到子窗口。
代码如下：
父窗口网页parent.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
window.onfocus = function focus(){//重写父窗口window对象中的onfocus，使其在获得焦点时执行以下代码
if( typeof(window.childWindow)!="undefined"){//如果子窗口存在，将焦点转到子窗口
window.childWindow.focus();
}
}
function showChild(){
//打开一个子窗口，并将子窗口的引用保存在父窗口window的childWindow属性中
window.childWindow = window.open("child.html","child","width=300px,height=110px,resizable=no,scroll=no,status=no");
window.childWindow.focus();
}
</script>
</head>
<body>
<input name="btn_show" type="button" value="显示子窗口" onclick="showChild()" />
<input name="btn_alert" type="button" value="显示其他" onclick="alert('被调用了')" />
</body>
</html>
子窗口网页 child.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
window.onunload = function unload(){
window.opener.childWindow = undefined;
}
</script>
</head>
<body>
这是子窗口！
</body>
</html>
分享到：
相关推荐
- 对于需要跨浏览器兼容的应用，推荐使用 `window.open`，并根据需求通过其他技术（如 CSS、JavaScript 库等）模拟模态对话框的行为。 总的来说，虽然 `ShowModalDialog` 在某些场景下提供了更强大的功能，但由于其...
同时，为了模拟模态效果，我们需要在主窗口中阻止用户对其他元素的交互，这通常通过CSS样式或者JavaScript事件处理来实现。 在提供的文件列表中，我们看到有多个以`.aspx`和`.aspx.cs`为扩展名的文件。`.aspx`文件...
文章中提到了几种实现 `window.open()` 方法不被浏览器拦截的解决方法，其中包括新建 `a` 标签模拟点击、使用 `window.showModalDialog()` 方法和使用 `setTimeout()` 与 `window.open()` 结合的方式。 1. 新建 `a`...
开发者更倾向于使用`window.open()`配合`display: none`的CSS和JavaScript来模拟模态对话框，或者使用Bootstrap、jQuery UI等库提供的模态插件。 总的来说，虽然`Window.showModalDialog()`在某些场景下仍可能有其...
`window.open()` 可以创建一个新的浏览器窗口或者打开一个已经存在的窗口，并且可以设置新窗口的各种属性，如位置、大小、是否显示工具栏等。虽然它不能直接提供与 `showModalDialog()` 相同的模态效果，但可以通过...
这段代码首先定义了一个JavaScript字符串，用于重写 `showModalDialog` 方法，将其替换为 `window.open` 函数，这样对话框将以非模态窗口的形式打开，Selenium 就可以继续执行并选中这个新窗口。然后，代码模拟点击...
因此在开发时，推荐使用更加标准化的 HTML5 和 JavaScript 功能来实现模态对话框，如使用对话框 API 或者利用 CSS 和 JavaScript 来自定义模态窗口。 综上所述，open() 和 showModalDialog() 方法在不同的场景下...
由于这种不一致性，开发人员通常需要寻找替代方案，例如使用CSS和JavaScript模拟模态对话框，以确保跨浏览器的兼容性和一致的用户体验。例如，可以使用Bootstrap的Modal组件，或者其他JavaScript库如jQuery UI或...
而通过window.showModalDialog()打开的模态窗口，则需要使用window.dialogArguments.location.reload()方法。 接下来，文章阐述了JavaScript中如何弹出窗口，这里有两种常见的方法：window.open()和window....
对于Chrome浏览器，它会使用`window.open()`并传递同样的参数，以创建一个不可最小化、无工具栏和菜单栏的窗口，从而达到模态对话框的效果。 此外，`showModalDialog()`返回的`returnValue`在Chrome中无法获取，但...
为了解决这个问题，开发者找到了一个替代方案，即使用`window.open`函数来模拟模态对话框的效果。 `window.open`函数可以打开一个新的浏览器窗口或标签，通过设置参数，如"height", "width", "status", "toolbar", ...
在使用 `window.open()` 或者 `showModalDialog()` 打开子窗口后，有时候需要在关闭子窗口后刷新父窗口。这里提供两种方法： 1. **使用 `window.open()` 打开的窗口**： ```javascript window.opener.location....
需要注意的是，由于弹出窗口可能被视为侵入性的用户体验，现代Web设计倾向于使用模态HTML元素（如`<dialog>`）或JavaScript库（如jQuery UI）来模拟对话框效果，以避免浏览器的弹出窗口阻止机制。同时，`...
具体到这段代码，`showModalDialog`是一个非标准但广泛支持的方法，主要用于创建模态对话框，即阻止用户与主窗口交互直到对话框被关闭的窗口。其语法如下： ```javascript var k = window.showModalDialog(url, ...
父对话框通常是主页面或者已打开的一个模态窗口，而子对话框则是在父对话框之上弹出的新模态窗口。当用户在子对话框中进行操作后，可能需要将结果返回给父对话框，这就涉及到了值的传递。 在JavaScript中，我们可以...
- **Firefox**：不支持`showModalDialog`，但可以通过`window.open`模拟模态对话框。 **示例代码**： ```javascript // 打开新窗口 var newWindow = window.open("about:blank", "dialog", "width=400,height=300")...
首先，问题在于Chrome不会像预期那样阻止用户与父窗口交互，它实际上将`showModalDialog`当作了`window.open`方法处理，打开了一个新的非模态窗口。这使得用户可以在子窗口活动的同时操作父窗口，且`returnValue`...