HTML 5 Notifications api 桌面提醒接口

google chrome 浏览器支持html5 Notifications api ,用这个api 可以创建原生的提示信息，类似像OS X的Growl提示。

需要注意的是，您需要检查用户是否已提供您的站点许可来使用这个 API。如果没有，您必须请求许可，即是：需要用户手动按“允许”按钮。

实例

代码如下

复制代码

<!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>

时间： 2024-09-20 06:03:26

HTML 5 Notifications api 桌面提醒接口

HTML 5 Notifications api 桌面提醒接口的相关文章

Chrome 5开放桌面提醒API 扩展可发桌面通知

利用新浪微博API的Search接口做微博锐推榜

ip地址api第三方jsonp接口整理

Web API系列(二)接口安全和参数校验

vba win32 api-vba 中调用win 32 的api接口

用C++如何实现开放API接口服务器

android开发-安卓天气预报软件API接口

利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解_javascript技巧

大叔也说Xamarin~Android篇~调用远程API接口，发POST请求