如何在网页打开时弹出通知,JS代码

原创已于 2024-10-24 17:13:45 修改 · 7.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

于 2015-07-18 11:47:03 首次发布

JS 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了网页弹窗的基本代码、个性化设置、函数控制、定时关闭、包含多个窗口等高级应用，以及如何利用Cookie控制弹出窗口的频率，确保用户体验更佳。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Web开发中，弹出窗口是一种常见的交互方式，用于显示额外的信息或页面。虽然现代Web开发通常会使用模态对话框（如Bootstrap的Modal）代替传统的浏览器弹出窗口，但了解基本的弹出窗口技术仍然有助于理解Web开发的历史和基础。以下是关于如何使用JavaScript创建和控制弹出窗口的详细指南。

基本弹出窗口

1. 最基本的弹出窗口

<script>
    window.open('page.html');
</script>

说明：这段JavaScript代码用于打开一个新的浏览器窗口或标签页，显示page.html。需要确保page.html的路径正确。

定制弹出窗口

2. 设置窗口属性

你可以通过指定更多参数来控制弹出窗口的外观和行为：

<script>
    window.open('page.html', 'newwindow', 'width=400,height=300,top=100,left=100');
</script>

参数解释：
- width 和 height：窗口的宽度和高度。
- top 和 left：窗口相对于屏幕左上角的位置。

使用JavaScript函数控制弹出窗口

3. 用函数控制弹出窗口

<script>
    function openWin() {
        window.open('page.html', 'newwindow', 'width=400,height=300');
    }
</script>
<a href="#" onclick="openWin()">打开一个窗口</a>

说明：定义了一个openWin函数，可以通过点击链接来触发窗口打开。

同时弹出多个窗口

4. 同时弹出两个窗口

<script>
    function openTwoWindows() {
        window.open('page1.html', 'window1', 'width=400,height=300,top=100,left=100');
        window.open('page2.html', 'window2', 'width=400,height=300,top=100,left=520');
    }
</script>
<a href="#" onclick="openTwoWindows()">打开两个窗口</a>

说明：通过不同的top和left参数，避免两个窗口重叠。

控制弹出窗口关闭

5. 弹出窗口自动关闭

在page.html中添加以下代码，使窗口在10秒后自动关闭：

<script>
    setTimeout(function() {
        window.close();
    }, 10000);
</script>

说明：setTimeout函数用于设置一个定时器，以毫秒为单位，10秒后执行window.close()。

使用Cookie控制弹出行为

6. 弹出窗口只弹一次

通过Cookie来控制窗口只弹一次：

<script>
    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }

    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }

    function openOnce() {
        if (!getCookie('popupShown')) {
            window.open('page.html', 'newwindow', 'width=400,height=300');
            setCookie('popupShown', 'true', 1);
        }
    }
</script>
<body onload="openOnce()">