浏览器实现桌面级右下角提示框

LiWei丶丶

已于 2024-03-01 14:49:02 修改

阅读量532

点赞数 10

文章标签： javascript 前端

于 2024-02-28 17:52:54 首次发布

本文链接：https://blog.csdn.net/qq_35410775/article/details/136351890

版权

首先，查看当前网站有通知权限 google浏览器为例隐私和安全通知如果是允许或者是询问状态就跳过此步（询问状态需要用户确认）

如果通知选项是灰色无法选中（原因网站不受信任是http），需要在Experiments里设置

设置步骤Chrome地址栏输入：chrome://flags/#unsafely-treat-insecure-origin-as-secure

找到图下搜索Insecure origins treated as secure 把不安全的视为安全填入有通知需求的地址（http://ip+端口）多个地址用英文逗号隔开，保存就配置好了。

JS实现网页消息通知（电脑桌面右下角提示弹框）

<!DOCTYPE html>  
<html>  
<head>  
  <title>我的基本HTML页面</title>  
</head>  
<body>  
     <button onclick="showNotification()">显示通知</button> 

    <script type="text/javascript" th:inline="javascript">
	    function showNotification(){
	    	if (Notification.permission === 'granted') {  
	    		  // 如果已经获得权限，可以直接发送通知  
	    		  sendNotification();  
	    		} else if (Notification.permission !== 'denied') {  
	    		  // 如果用户还未做出选择，则请求权限  
	    		  Notification.requestPermission().then(function (permission) {  
	    		    // 回调函数会在用户做出选择后被调用  
	    		    if (permission === 'granted') {  
	    		      // 用户允许显示通知  
	    		      sendNotification();  
	    		    }  
	    		  });  
	    		}  
	    		  
	    		function sendNotification() {  
	    		  // 发送通知的代码  
	    		  const notification = new Notification('Hi there!');  
	    		}
	    }
	   
    </script>  
</body>  
</html>

运行效果：

LiWei丶丶

关注

10
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
浏览器实现桌面级右下角提示框

设置步骤Chrome地址栏输入：chrome://flags/#unsafely-treat-insecure-origin-as-secure。首先，查看当前网站有通知权限 google浏览器为例隐私和安全通知如果是允许或者是询问状态就跳过此步（询问状态需要用户确认）找到图下把不安全的视为安全填入有通知需求的地址（http://ip+端口）多个地址用英文逗号隔开，保存就配置好了。如果通知选项是灰色无法选中（原因网站不受信任是http），需要在Experiments里设置。
复制链接

扫一扫