按标签名称隐藏 JS 通知对象答案

【问题标题】：Hide JS Notification Object By Tag Name按标签名称隐藏 JS 通知对象
【发布时间】：2015-06-15 22:11:03
【问题描述】：

我正在为我的项目使用通知 API 来显示浏览器通知，其中每个通知都有一个唯一的标签 (ID)，但我似乎找不到通过标签名称关闭或隐藏通知的方法，没有调用对象的 close 函数，因为它可能与其他页面一起关闭，而不是它的起源。这种事情可能吗？

【问题讨论】：

您是指关闭浏览器本身的另一个窗口创建的通知吗？我对这句话有点困惑“通过标签名称关闭或隐藏通知，而不调用对象上的关闭函数，因为它可能会被其他页面关闭而不是它的来源”跨度>
这里的通知 API w3.org/TR/notifications，我的意思是我知道我可以创建一个新的通知对象，然后在该对象上调用 close 方法，但是我想要关闭的操作通知可能发生在未创建对象的页面上，因此唯一的方法就是按标签名称关闭通知，但我似乎无法在任何地方找到该文档

标签： javascript notifications web-notifications

【解决方案1】：

您可以将通知保存在 localStorage 中，然后检索并关闭。

例如

// on create
var n = new Notification('Notification Title', {
        tag: _this.attr('data-notification-id')
    });
window.localStorage.setItem('data-notification-id', n);

和

// then later
var n = window.localStorage.getItem('data-notification-id');
n.close();

【讨论】：

我不知道有这样的东西存在，而且我很惊讶它超级兼容（当然不是在 IE 7 中，但我不在乎 IE 7）。谢谢！
这在当前浏览器中不起作用。 window.localStorage.setItem 允许您设置 DOMString 类型的名称和值对，而不是 Notifcation 对象。

【解决方案2】：

我现在已经解决了这个问题，但我的解决方案似乎很奇怪，所以我仍然接受遵循更“正常”方法的其他答案。

基本上，使用标签创建的新通知对象而当前已经可见的通知已经具有相同的标签，原始通知将被删除。因此，通过创建具有相同标签的新通知对象并立即删除它，我可以“删除”旧通知。

查看通知的链接

<a href="/some/url" data-notification-id="1234">View this notification</a>

还有 jQuery

$('a[data-notification-id]').on('click', function(){
    var _this = $(this);
    var n = new Notification('Notification Title', {
        tag: _this.attr('data-notification-id')
    });
    setTimeout(n.close.bind(n), 0);
});

【讨论】：

【解决方案3】：

您可以将通知选项字符串化并使用标签作为存储键保存到会话（或本地）存储中。然后您可以使用存储的通知选项重新创建/替换它，然后调用关闭。

创建通知：

if (("Notification" in window)) {
   if (Notification.permission === "granted") {
      var options = {
         body: sBody,
         icon: sIcon,
         title: sTitle, //used for re-create/close 
         requireInteraction: true,
         tag: sTag
      }
      var n = new Notification(sTitle, options);
      n.addEventListener("click", function (event) {
         this.close();
         sessionStorage.removeItem('notification-' + sTag);
      }, false);
      sessionStorage.setItem('notification-' + sTag, JSON.stringify(options));
   }
}

清除通知：

function notificationClear(sTag) {
    var options = JSON.parse(sessionStorage.getItem('notification-' + sTag));
    if (options) {
        options.requireInteraction = false;
        if (("Notification" in window)) {
            if (Notification.permission === "granted") {
                var n = new Notification(options.title, options);
                setTimeout(function () {
                    n.close();
                    sessionStorage.removeItem('notification-' + sTag);
                }, 500); //can't close it immediately, so setTimeout is used
            }
        }
    }       
}

【讨论】：