JavaScript实现自动弹出窗口并自动关闭窗口的方法

2023年6月11日上午5:25 • JavaScript

要实现自动弹出窗口并自动关闭窗口，可以使用JavaScript的定时器和窗口对象的方法。具体步骤如下：

一、弹出窗口

使用window.open()方法在浏览器中弹出一个新窗口。

window.open("http://www.example.com", "example", "width=300,height=200");

在弹出窗口中显示内容，可以写HTML代码或引用外部网页。

var popUp = window.open("", "example", "width=300,height=200");
popUp.document.write("<h1>Hello, World!</h1>");

如果需要在弹出窗口中使用JavaScript代码，可以在调用window.open()方法时加上参数"resizable=1,scrollbars=1"。

var popUp = window.open("", "example", "width=300,height=200,resizable=1,scrollbars=1");
popUp.document.write("<h1>Hello, World!</h1>");
popUp.setTimeout(function() { popUp.close(); }, 5000); // 5秒后自动关闭窗口

二、自动关闭弹出窗口

使用window.close()方法关闭当前窗口。

window.close();

如果需要延时关闭窗口，可以使用setTimeout()方法设置定时器，到指定时间后调用window.close()方法。

var timer = setTimeout(function() { window.close(); }, 5000); // 5秒后自动关闭窗口

注意：如果在当前窗口中打开的是其他网站的页面，在涉及到关闭窗口时，浏览器的一些安全性质可能会影响到窗口的关闭操作。因此，应该尽量在当前网页中打开新的窗口，并在新的窗口中实现自动关闭操作。

示例一：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自动弹出窗口并自动关闭窗口示例</title>
    <script type="text/javascript">
        function openPopUp() {
            var popUp = window.open("", "example", "width=300,height=200,resizable=1,scrollbars=1");
            popUp.document.write("<h1>Hello, World!</h1>");
            popUp.setTimeout(function() { popUp.close(); }, 5000); // 5秒后自动关闭窗口
        }
    </script>
</head>
<body onload="openPopUp()">
    <p>页面加载完成后自动弹出窗口，并在5秒后自动关闭窗口。</p>
</body>
</html>

示例二：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自动关闭窗口示例</title>
    <script type="text/javascript">
        function closeWindow() {
            var timer = setTimeout(function() { window.close(); }, 5000); // 5秒后自动关闭窗口
        }
    </script>
</head>
<body onload="closeWindow()">
    <p>页面加载完成后，5秒后自动关闭当前窗口。</p>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现自动弹出窗口并自动关闭窗口的方法 - Python技术站