要实现父窗口控制只弹出一个子窗口,需要满足以下几个步骤:
要实现父窗口控制只弹出一个子窗口,需要满足以下几个步骤:
-
在父窗口中定义一个全局变量,用于保存打开的子窗口对象。
-
在打开子窗口的函数中,先判断全局变量是否为空。如果为空,说明没有打开过子窗口,那么创建新的子窗口对象并赋值给全局变量。如果不为空,说明已经存在子窗口,那么判断子窗口是否关闭,如果关闭,则再次创建新的子窗口对象并赋值给全局变量;如果没有关闭,则聚焦在已存在的子窗口上。
-
在子窗口关闭时,将全局变量的值置为空。
下面是两个示例说明:
- 在父窗口点击按钮弹出子窗口
父窗口代码:
<script>
var childWindow = null;
function openChildWindow(url) {
if (childWindow && !childWindow.closed) {
childWindow.focus();
} else {
childWindow = window.open(url, "childWindow");
}
}
function closeChildWindow() {
if (childWindow && !childWindow.closed) {
childWindow.close();
childWindow = null;
}
}
</script>
<button onclick="openChildWindow('https://www.example.com')">打开子窗口</button>
<button onclick="closeChildWindow()">关闭子窗口</button>
子窗口代码:
<script>
window.onunload = function() {
window.opener.childWindow = null;
}
</script>
- 在子窗口点击链接打开新的子窗口
父窗口代码:
<script>
var childWindow = null;
function openChildWindow(url) {
if (childWindow && !childWindow.closed) {
childWindow.focus();
} else {
childWindow = window.open(url, "childWindow");
}
}
function closeChildWindow() {
if (childWindow && !childWindow.closed) {
childWindow.close();
childWindow = null;
}
}
</script>
<button onclick="openChildWindow('https://www.example.com')">打开子窗口</button>
<button onclick="closeChildWindow()">关闭子窗口</button>
子窗口代码:
<script>
window.onunload = function() {
if (opener && opener.childWindow && !opener.childWindow.closed) {
opener.childWindow.close();
}
}
</script>
<a href="https://www.example.com" target="_blank" onclick="window.open(this.href, 'childWindow'); return false;">点击打开新的子窗口</a>
沃梦达教程
本文标题为:用javascript父窗口控制只弹出一个子窗口
基础教程推荐
猜你喜欢
- css中引入svg来兼容部分安卓机显示0.5px边框的示例 2024-04-07
- 如何在HTML / jquery中为Linux终端生成256个调色板 2023-10-25
- 「HTML+CSS」--自定义加载动画【026】 2023-10-28
- 解析页面加载与js函数的执行 onload or ready 2024-02-10
- vue开发反思总结 2023-10-08
- selenium+python自动化测试之页面元素定位 2023-12-20
- HTML DOM setInterval和clearInterval方法案例详解 2022-11-20
- Vue刷新后页面数据丢失问题的解决过程 2024-04-15
- 纯CSS实现漂亮的下拉导航效果代码 2024-01-23
- JavaScript生成带有缩进的表格代码 2023-12-03