js弹出子窗口怎么关闭

在JavaScript中关闭弹出子窗口的方法是：使用window.close()、通过引用子窗口对象的方式、确保子窗口在同一域名下。接下来，我们将详细讨论其中一种方法：

使用window.close()： 可以通过在子窗口内调用window.close()方法来关闭当前窗口。这种方法最为直接和简单，但有一些限制，比如浏览器安全机制可能会阻止没有通过JavaScript打开的窗口被关闭。

一、使用window.close()方法

window.close()方法是关闭子窗口最直接和最常见的方式。它只能关闭由JavaScript通过window.open()方法打开的窗口。以下是一个简单的示例：

// 打开子窗口
var childWindow = window.open('http://www.example.com', 'childWindow');
// 在子窗口内，执行关闭操作
childWindow.close();

这个方法的优点是简单直接，但缺点是受到浏览器的安全限制，可能会被阻止。

1.1、浏览器安全限制

大多数现代浏览器为了防止滥用，不允许脚本关闭非由脚本打开的窗口。因此，window.close()方法只能用于关闭通过window.open()方法打开的窗口。这种机制是为了保护用户体验，防止恶意网站随意关闭用户的窗口。

1.2、如何在子窗口内调用window.close()

假设你已经通过JavaScript打开了一个子窗口，下面是如何在子窗口内调用window.close()的示例：

<!-- 主窗口的代码 -->
<button onclick="openChildWindow()">打开子窗口</button>
<script>
function openChildWindow() {
    var childWindow = window.open('child.html', 'childWindow');
    // 传递关闭命令到子窗口
    childWindow.onload = function() {
        childWindow.document.getElementById('closeBtn').onclick = function() {
            childWindow.close();
        };
    };
}
</script>
<!-- 子窗口child.html的代码 -->
<!DOCTYPE html>
<html>
<head>
    <title>子窗口</title>
</head>
<body>
    <button id="closeBtn">关闭窗口</button>
</body>
</html>

以上代码说明了如何在子窗口中调用window.close()方法来关闭自身。

二、通过引用子窗口对象的方式

当你在主窗口中打开一个子窗口时，可以保持对该子窗口对象的引用，然后在主窗口中调用关闭方法。以下是一个示例：

var childWindow = window.open('http://www.example.com', 'childWindow');
// 在需要关闭子窗口时调用
childWindow.close();

2.1、保持子窗口对象的引用

确保在主窗口中保持对子窗口对象的引用，这样才能在需要时调用close()方法。以下是一个更详细的示例：

<!-- 主窗口的代码 -->
<button onclick="openChildWindow()">打开子窗口</button>
<button onclick="closeChildWindow()">关闭子窗口</button>
<script>
var childWindow;
function openChildWindow() {
    childWindow = window.open('child.html', 'childWindow');
}
function closeChildWindow() {
    if (childWindow && !childWindow.closed) {
        childWindow.close();
    }
}
</script>

这种方法的优点是，你可以在主窗口中控制子窗口的打开和关闭，缺点是需要保持对子窗口对象的引用。

2.2、判断子窗口是否已关闭

在调用childWindow.close()之前，可以通过检查childWindow.closed属性来判断子窗口是否已经关闭：

if (childWindow && !childWindow.closed) {
    childWindow.close();
}

这样可以避免对已经关闭的窗口调用close()方法。

三、确保子窗口在同一域名下

由于同源策略的限制，JavaScript只能操作与主窗口同源的子窗口。确保子窗口与主窗口在同一域名下，以便能够顺利进行关闭操作。

3.1、同源策略

同源策略是一种重要的安全机制，用于防止不同源的脚本相互访问数据。不同源是指协议、域名和端口中的任意一个不同。例如，http://example.com和https://example.com是不同源，http://example.com和http://sub.example.com也是不同源。

3.2、如何确保同源

确保子窗口和主窗口使用相同的协议、域名和端口。例如：

// 主窗口和子窗口都在 http://www.example.com 域名下
var childWindow = window.open('http://www.example.com/child.html', 'childWindow');

通过确保同源，可以避免同源策略的限制，顺利进行子窗口的关闭操作。

四、总结

在JavaScript中关闭弹出子窗口的方法主要有三种：使用window.close()、通过引用子窗口对象的方式、确保子窗口在同一域名下。这些方法各有优缺点，适用于不同的场景。在实际应用中，需要根据具体需求选择合适的方法。

使用window.close()方法是最直接的方式，但受到浏览器安全限制；通过引用子窗口对象的方式可以在主窗口中控制子窗口的打开和关闭；确保子窗口在同一域名下可以避免同源策略的限制，顺利进行操作。

无论选择哪种方法，都需要注意浏览器的安全机制和同源策略，以确保操作的顺利进行。