如何在HTML5通知中包含链接？

Question

我希望能够为每个通知设置链接/永久链接，因此当用户点击它时;然后他被带到永久链接的位置，

我见过this answer有一个有点不同的解决方案因为使用了静态链接，

不知怎的，我想：

var noti = window.webkitNotifications.createNotification(
     'http://funcook.com/img/favicon.png', 
     'HTML5 Notification', 
     'HTML5 Notification content...',
     'http://mycustom.dynamic.link.com/'    /* invented code */
)
noti.onclose = function(){ alert(':(') };
noti.onclick = function(){ 
    window.location.href = $(this).url; /* invented code */
};
noti.show();

任何机会？ （我真的不喜欢静态html文件解决方案......我想保留这种语法）

Answer 1

这样的事怎么样？

var createNotificationWithLink = function(image, title, content, link) {
    var notification = window.webkitNotifications.createNotification(image, title, content);

    notification.onclose = function() {
        alert(':(');
    };

    notification.onclick = function() { 
        window.location.href = link;
    };

    return notification;
};

现在，只要您想创建通知，就可以调用createNotificationWithLink：

var noti = createNotificationWithLink(
    'http://funcook.com/img/favicon.png',
    'HTML5 Notification',
    'HTML5 Notification content...',
    'http://mycustom.dynamic.link.com/'
);

noti.show();

如果你愿意，你也可以将noti.show();移动到createNotificationWithLink函数中（notification.show();）。我不知道您是否希望在创建通知时自动显示通知...

Answer 2

你可以传递一个data属性，你可以在onclick事件处理程序中读取e.target.data。

var notification = new window.Notification("Hello!",
{
    body: "Hello world!",
    data: "https://www.example.com/?id=" + 123
});

notification.onclick = function(e) {
    window.location.href = e.target.data;
}

Answer 3

noti.onclick = function() {
    window.open("http://www.stackoverflow.com")
};

更多关于如何使用window.open：http://www.w3schools.com/jsref/met_win_open.asp4

HTML5通知资源：http://www.html5rocks.com/en/tutorials/notifications/quick/（如果这不能回答你的问题）

对于每一个你可能有：

var noti1 = window.webkitNotifications.createNotification(
     'http://funcook.com/img/favicon.png', 
     'HTML5 Notification', 
     'HTML5 Notification content...',

var noti2 = window.webkitNotifications.createNotification(
     'http://funcook.com/img/favicon.png', 
     'HTML5 Notification #2', 
     'HTML5 Notification #2 content...',

等等

然后

noti1.onclick = function() {
    window.open("http://www.stackoverflow.com")
};
noti2.onclick = function() {
    window.open("http://www.example.com")
};

希望有帮助:)

Answer 4

您可以将url作为属性添加到'noti'，然后使用this.yourpropertyname调用该属性

例：

noti.myurl = 'http://stackoverflow.com';

...

noti.onclick = function(){ 
    window.location.href = this.myurl;
};

希望这可以帮助。

Answer 5

对于需要打开新浏览器窗口（选项卡），但不希望替换父窗口（选项卡）并专注于通知点击的任何人，此代码片段将起到作用：

 var notification = new window.Notification("Hello!", {
   body: "Hello world!",
   data: "https://www.google.com/"
 });

 notification.onclick = function(event) {
          event.preventDefault();  //prevent the browser from focusing the Notification's tab, while it stays also open        
          var new_window = window.open('','_blank'); //open empty window(tab)
          new_window.location = event.target.data; //set url of newly created window(tab) and focus

        };