如何在HTML5通知中包含链接

我希望能够为每个通知设置一个链接/permalink，这样当用户点击它时；然后他被带到永久链接位置，

我看到了这个答案，它的解决方案有点不同，因为使用了静态链接，

不知怎么的，我想：

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文件解决方案……我想保留这种语法）

这样的东西怎么样？

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();）。我不知道你是否希望在创建通知时自动显示…

您可以传递data属性，该属性可以作为e.target.data从onclick事件处理程序中读取。

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;
}

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...',

etc

然后

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

希望能有所帮助：）

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

示例：

noti.myurl = 'http://stackoverflow.com';
...
noti.onclick = function(){ 
    window.location.href = this.myurl;
};

希望这能有所帮助。

对于任何需要打开新浏览器窗口（选项卡），但不希望在点击通知时替换父窗口（选项卡

 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
        };

相关内容

最新更新

热门标签：