用HTML5产生操作系统通知

最新推荐文章于 2024-10-18 08:07:37 发布

最新推荐文章于 2024-10-18 08:07:37 发布 · 370 阅读

文章标签：

#操作系统 #javascript #ViewUI

HTML5 专栏收录该内容

39 篇文章

订阅专栏

本文演示了如何利用HTML5中的NotificationsAPI和GoogleChrome浏览器生成系统通知，包括请求权限、设置通知内容和自动关闭延迟。

下面的例子展示了你如何产生系统的通知。使用HTML5中的Notifications API 和Google Chrome浏览器.

<!DOCTYPE HTML>
<html>
<head>
    <title>Creating OS notifications in HTML5</title>
</head>
<body>
 
    <form>
        <input type="button" value="Hey, do you want to show notifications or not?" onclick="init();" />
        <input type="button" value="Send OS notification" onclick="notify();" />
    </form>
 
    <script type="text/javascript">
        const AUTO_CLOSE_DELAY_SECONDS = 5;
 
        function init() {
            if (window.webkitNotifications) {
                window.webkitNotifications.requestPermission();
            }
        }
 
        function notify() {
            var icon = "accept.png";
            var title = "[" + new Date().toLocaleTimeString() + "] This notification will close in " + AUTO_CLOSE_DELAY_SECONDS + " seconds";
            var body =  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id magna ut sapien sodales ultricies eget nec metus. Pellentesque molestie nunc nec leo iaculis eu dictum ante porta. Sed adipiscing condimentum sapien a scelerisque. Quisque luctus elit vel odio semper iaculis. Nunc sit amet neque justo. Phasellus ullamcorper dui vel risus varius vitae aliquet purus consectetur. Fusce felis nibh, volutpat ac ornare at, ullamcorper eget lacus. Nunc euismod iaculis porta. In hac habitasse platea dictumst. Proin a sem sed neque tincidunt scelerisque eget in elit. Ut quis felis quis tortor sollicitudin sollicitudin id quis tortor. Nunc porttitor diam id leo lobortis aliquet. Nam scelerisque molestie dolor, placerat hendrerit urna euismod eu. Praesent nec massa enim. Donec nec urna dignissim nunc fringilla luctus. Nunc pretium urna et diam accumsan fermentum. Vivamus condimentum lectus vitae mi vulputate pulvinar. Curabitur adipiscing ultrices arcu. Vestibulum luctus malesuada erat sit amet rutrum. Nam feugiat lectus quis libero adipiscing laoreet.";
 
            if (window.webkitNotifications) {
                if (window.webkitNotifications.checkPermission() == 0) {
                    var popup = window.webkitNotifications.createNotification(icon, title, body);
                    popup.ondisplay = function(event) {
                        setTimeout(function() {
                            event.currentTarget.cancel();
                        }, AUTO_CLOSE_DELAY_SECONDS * 1000);
                    }
                    popup.show();
                } else {
                    window.webkitNotifications.requestPermission();
                    return;
                }
            }
        }
    </script>
 
</body>
</html>

源码下载：

使用HTML5中的Notifications API 和Google Chrome浏览器产生系统通知