HTML5 Notification 桌面提醒功能 API

最新推荐文章于 2021-05-31 05:00:38 发布
最新推荐文章于 2021-05-31 05:00:38 发布
阅读量1.9k 收藏
点赞数
分类专栏： Html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxfzgg/article/details/11521247
版权
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
 
    <script type="text/javascript">
       const miao=5;
         function init() {
            if (window.webkitNotifications) {
                window.webkitNotifications.requestPermission();
            }
        }
 
        function notify() {
            var icon = "logo.png";
            var title = "窗口将在 " + miao + " 5后关闭";
            var body =  "PHP100 提供的 HTML5视频教程 桌面提醒API";
 
            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();
                        }, miao * 1000);
                    }
                    popup.show();
                } else {
                    window.webkitNotifications.requestPermission();
                    return;
                }
            }
        }
    </script>

</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
 
    <script type="text/javascript">
       const miao=5;
         function init() {
            if (window.webkitNotifications) {
                window.webkitNotifications.requestPermission();
            }
        }
 
        function notify() {
            var icon = "logo.png";
            var title = "窗口将在 " + miao + " 5后关闭";
            var body =  "PHP100 提供的 HTML5视频教程 桌面提醒API";
 
            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();
                        }, miao * 1000);
                    }
                    popup.show();
                } else {
                    window.webkitNotifications.requestPermission();
                    return;
                }
            }
        }
    </script>

</body>
</html>

但是ie不支持const 声明可以到这里看看http://hi.baidu.com/cly84920/item/d1f31194f354344ff142152d?qq-pf-to=pcqq.c2c

刘晓飞
关注
专栏目录
HTML5闹钟代码
03-19
HTML5显示闹钟代码实现，以绘图的方式显示
如何使用 HTML5 的 Notification API
编程猫的专栏
10-29 1029
如何使用 HTML5 的 Notification API 2012-10-29 09:12| 发布者: html5cn |来自: oschina| 评论: 0 摘要: HTML5 已经不是什么新玩意儿，每个人都多少听说过一些HTML5的特性。大多数人认为HTML5无非就是一些像是header, footer, nav, article, section等一样新的语义标
HTML5 Notification桌面提醒功能
fighting__hg的博客
08-05 2951
桌面通知功能能够让浏览器即使是最小化状态也能将信息通知给用户，这和WebIM是最为天然的结合。 1.先判断浏览器支持情况        alert(Boolean(window.Notification));      //返回true即支持，经测试目前IE不支持 2.判断是否开启权限    if (Notification.permission==='granted') { .....
js消息通知Notification
cmyh100的博客
08-09 4313
想要让自己的通知消息出现在桌面？ 看这里。 最近写的消息提醒，主要是某需求要用到，感觉很不错，美中不足就是浏览器兼容性并没有非常的好 自己电脑里的Google、Firefox没有问题 但是搜狗、360、欧朋等等没有作用 Edge提示在了 点击后想要直接弹出相应的页面，这里取巧用了个alert 更多大家去发掘吧 代码如下： //参数1：title
HTML 5 Notification消息通知DEMO示例
dawuafang
06-21 879
Web Notifications是HTML5中一个令人欣喜的新特性，它支持开发者配置和显示桌面通知，为用户提供更好的体验，最令人称赞的是，即使用户忙于其他工作时也可以收到来自页面的消息通知，例如一个新邮件的提醒，或者一个在线聊天室收到的消息提醒等等。 关于Notification的Constructor定义如下： [Constructor(DOMString title, op...
html5桌面提醒功能,HTML5 Notification 桌面提醒功能 API
weixin_42184237的博客
05-31 144
桌面提醒的介绍桌面通知功能能够让浏览器即使是最小化状态也能将消息通知给用户。这和WebIM是最为天然的结合。不过，目前支持Desktop Notification功能的浏览器只有Chrome5+。注：弹出来的内容中只能是文本，暂不支持HTML在实际使用的过程中，应该尽量减少通知功能对用户的干扰，最大程度的减少通知功能的出现，这就需要解决以下几个问题：1. 收到多条消息时确保只出现一条通知;2. 当...
html5 桌面提醒参数,[HTML5]Notification桌面提醒功能
weixin_30152861的博客
05-31 444
桌面提醒的介绍桌面通知功能能够让浏览器即使是最小化状态也能够将消息通知给用户。这和WebIM是最为天然的结合。弹出来的内容只能是文本，暂不支持HTML。Notification桌面提醒功能的好处传统的桌面通知可以写一个div放到页面右下角自动弹出来，并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是：当我在使用京东 进行购物的时候，我是不知道人人网有消息推送过来给我的，而必须要等我...
HTML5 Notification（桌面提醒）功能使用实例
09-28
HTML5 Notification（桌面提醒）功能是HTML5提供的一个API，它允许网页向用户的桌面发送通知消息。这个功能可以在浏览器最小化或不在前台运行时仍然通知用户，突破了浏览器沙盒模式的限制，增强了用户交互体验。 ...
HTML5实现Notification API桌面通知功能
09-28
HTML5的桌面通知功能是现代Web应用程序与用户交互的重要方式之一，它使得浏览器能够在后台或用户专注于其他页面时发送提醒。这种通知不依赖于特定的网页，而是由浏览器本身管理，确保用户不会错过任何重要的消息。...
HTML5中的Web Notification桌面右下角通知功能的实现
09-27
HTML5 Web Notification 是一个非常有用的特性，它允许开发者向用户桌面发送通知消息。这个功能特别适合用来提醒用户有关新消息的到达或进行重要的信息更新。桌面通知可以跨越浏览器窗口或标签页的限制，即使浏览器...
HTML5实现桌面通知 提示功能
09-27
总的来说，HTML5的桌面通知功能通过`Notification`对象和相关的API，为Web开发者提供了与用户更直接、更即时的沟通方式。正确使用这一特性，可以提升用户体验，但同时也应尊重用户的选择，避免滥用通知打扰用户。
浏览器语音桌面通知，Notification API
weixin_34342578的博客
03-08 742
前言 之前在浏览Youtube时，突然看到浏览器右上角弹出一个通知，点击就就进到了指定视频界面，感觉很是不错，如果加上语音效果结合WebSocket，正好可以用到自己的毕业设计之中。 关于Notification 在MDN上的介绍是：用于向用户配置和显示桌面通知，且必须是在Web Worker中才能使用。更为详细的介绍可以去看看HTML5 桌面通知：Notification API，这位大佬已经写...
HTML5 地理位置定位 API 接口开发
热门推荐
刘晓飞
09-10 2万+
地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA 地理位置获取流程： 1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。 3、假设用户允许，浏览器从设别查询相关信息。 4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。 HTML5地理地位的实现： 1. 实现基于
HTML5 Canvas 图像动画的实现(实例小球弹跳)
刘晓飞
09-09 5413
Canvas 中 clearRect 清除函数 var c=document.getElementById("php100"); var p100=c.getContext("2d"); p100.clearRect(x,y,x,y) // 擦除画布一个区域x-y、x-y ------ 代码如下：         
HTML5 Canvas 制作一个“在线画板”
刘晓飞
09-09 4357
#php100{ border:1px solid #ccc;}                 var canvas = document.getElementById('php100');         var p100=canvas.getContext("2d");         p100.lineWidth=10         p100.strokeStyle="r
拖拽文件上传
刘晓飞
09-10 3335
Drag&Drop : HTML5基于拖拽的事件机制. File API :  可以很方便的让 Web 应用访问文件对象，File API 包括FileList、Blob、File、FileReader、URI scheme，本文主要讲解拖拽上传中用到的 FileList 和 FileReader 接口。 FormData : FormData 是基于 XMLHttpReque
HTML5 智能form表单新属性
刘晓飞
09-10 3165
XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素，在HTML5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。 html5中确实添加了不少的新的属性，给我们省去了好大的功夫去判断。 … 智能表单使用与规范 限制用户输入email格式 限制用户输入网址格式 限制用户
第三讲 HTML5 视频播放事件属性及自己做的一个简单的html5的视频
刘晓飞
09-06 2903
1、视频格式的简单介绍 视频格式：avi、rmb、wmv、mpeg4、ogg、webm 在过去，我们如果想在Web上播放视频，也是都是通过Flash来播放，同样并不是所有的浏览器都安装了Flash播放器插件，而现在我们在HTML5中，就能完全脱离Flash或其他的插件来播放视频了  HTML5支持的格式： Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文
HTML5实现桌面通知功能
HTML5的桌面提醒功能利用了Web Notifications API，使得Web应用能像桌面应用一样与用户交互，即使用户未直接关注浏览器窗口也能接收到重要信息。然而，由于这个API是非标准的，因此在实际开发中可能需要考虑其他兼容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值