JS关闭当前窗口

发布时间：2023-05-18

一、JS关闭当前窗口事件

在 JavaScript 中，可以使用 window.close() 方法来关闭当前窗口，这个方法可以被调用在一个窗口的任何 JavaScript 代码中。在 HTML 中，可以使用一个按钮或者链接来调用这个方法，从而关闭当前窗口。 例如，下面这个 HTML 代码片段展示了如何在一个链接中调用 window.close() 方法来关闭当前窗口：

<a href="#" onClick="window.close();">关闭窗口</a>

二、JS关闭当前窗口的方法

JavaScript 中，可以使用 window.close() 方法来关闭当前窗口。在实际应用中，我们可以将此方法封装成一个函数调用，以便复用。

function closeWindow() {
  window.close();
}

这样，我们就可以在任何需要关闭当前窗口的代码段中直接调用这个函数：

closeWindow();

三、关闭当前窗口下载

有时候，我们需要在关闭当前窗口之前，先下载一个文件。我们可以在下载完文件之后，再通过 JavaScript 的 window.close() 方法来关闭当前窗口。 例如，下面这个 HTML 代码片段展示了如何在一个按钮中实现下载文件和关闭当前窗口的功能：

<button onClick="downloadFile();">下载并关闭</button>
<script>
function downloadFile() {
  // 下载文件的代码
  window.close(); // 下载完成后关闭当前窗口
}
</script>

四、JS关闭当前窗口提示样式

有时候，在关闭当前窗口之前，我们需要给用户一个提示，让他们确认是否真的要关闭窗口。这可以使用 JavaScript 提供的 confirm() 方法来实现。 例如，下面这个 HTML 代码片段展示了如何在一个按钮中调用 confirm() 方法来提示用户确认是否真的要关闭当前窗口：

<button onClick="closeWindow();">关闭</button>
<script>
function closeWindow() {
  if (confirm("确定要关闭窗口吗？")) {
    window.close();
  }
}
</script>

在这个代码片段中，当用户点击按钮时，会弹出一个带有提示信息的对话框，用户可以点击“确定”或者“取消”来确认是否真的要关闭窗口。

五、JS关闭当前窗口不管用

在某些情况下，我们可能会发现调用 window.close() 方法并不能成功地关闭当前窗口。这可能是因为当前窗口是通过 JavaScript 打开的，而不是通过用户手动点击浏览器的关闭按钮。 一个比较简单的解决方案是让当前窗口打开的代码所在的页面调用 window.close() 方法。例如，下面这个代码展示了如何在父窗口中关闭当前窗口：

<a href="javascript:void(0);" onClick="window.open('http://www.example.com');">打开 Example 网站</a>
<script>
function closeChildWindow() {
  myWindow.close();
}
var myWindow = window.open("http://www.example.com");
myWindow.onunload = closeChildWindow;
</script>

在这个代码片段中，当用户点击链接时，会弹出一个新的窗口并打开 Example 网站。当该新窗口关闭时，会调用 closeChildWindow() 方法来关闭父窗口。

六、JS关闭当前窗口刷新父窗口

在某些情况下，当关闭当前窗口之后，需要刷新父窗口。这可以通过调用父窗口的 location.reload() 方法来实现。 例如，下面这个代码片段展示了如何在关闭当前窗口之后刷新父窗口：

var timer = window.setTimeout(function() {
  window.close();
  window.opener.location.reload();
}, 5000);

在这个代码片段中，当 timer 计时器到期时，会先关闭当前窗口，再通过 window.opener.location.reload() 方法来刷新父窗口。

七、jQuery关闭当前窗口

除了使用 JavaScript 原生提供的 window.close() 方法外，还可以使用 jQuery 中提供的 close() 方法来关闭当前窗口。 例如，下面这个代码片段展示了如何在一个按钮中使用 jQuery 来关闭当前窗口：

<button id="closeBtn">关闭</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#closeBtn").click(function() {
  window.close();
});
</script>

八、JS关闭当前标签页

有时候，我们需要关闭当前标签页而不是整个浏览器窗口。可以使用 JavaScript 的 window.close() 方法来关闭当前标签页，但是只有在当前标签页是通过 JavaScript 打开的情况下才有效。 例如，下面这个代码片段展示了如何在关闭当前标签页之前判断当前标签页是否是通过 JavaScript 打开的：

function closeCurrentTab() {
  if (window.opener) {
    window.open("about:blank", "_self").close();
  } else {
    window.close();
  }
}

在这个代码片段中，如果当前标签页是通过 JavaScript 打开的，则会打开一个新的空白页面并关闭当前标签页。否则，会调用 window.close() 方法来关闭当前标签页。

九、JS关闭弹窗

在某些情况下，我们需要在弹窗中添加关闭按钮或者在弹窗中调用 window.close() 方法来关闭弹窗。 例如，下面这个代码片段展示了如何在弹窗中添加关闭按钮来关闭弹窗：

<button id="closeBtn">关闭</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#closeBtn").click(function() {
  window.close();
});
</script>

在这个代码片段中，当用户点击关闭按钮时，会调用 window.close() 方法来关闭弹窗。

十、JS关闭浏览器窗口

在某些情况下，我们需要关闭整个浏览器窗口而不仅仅是当前标签页或者弹窗。这可以使用 JavaScript 的 window.close() 方法来实现。 例如，下面这个代码片段展示了如何在一个按钮中调用 window.close() 方法来关闭整个浏览器窗口：

<button onClick="closeBrowserWindow();">关闭浏览器窗口</button>
<script>
function closeBrowserWindow() {
  window.open("", "_self");
  window.close(); 
}
</script>

在这个代码片段中，当用户点击按钮时，会打开一个新的空白页面，并通过 window.close() 方法来关闭整个浏览器窗口。

推荐文章