如何在单击 Webkit 通知时从浏览器中的任何其他选项卡移回当前选项卡

Question

我已经为聊天制作了一个Webkit桌面通知。 当用户不在当前聊天页面上（我的意思是在另一个选项卡上）时，会收到通知。一切正常，因为我希望它们:)

现在我需要做的是当用户单击浏览器中另一个选项卡上出现的通知时，它会将他移回聊天选项卡。

例如，用户在MyAwesomeChat.example.com上聊天，然后移动到 Google.com 并在那里获得通知。只要他点击通知，它就会把他带到MyAwesomeChat.example.com **

下面我用一个函数编写了我的代码。我在我想做上述事情的地方addEventListner添加了一个"点击"，尽管仍然毫无头绪。

desktopnotify:(chat) ->
                if (window.webkitNotifications)
                    havePermission = window.webkitNotifications.checkPermission()
                    if havePermission is 0 && @window_blur
                      if (!(chat.get('USER_MAIL')==LOCAL_DATA.username)) 
                      # 0 is PERMISSION_ALLOWED means the user 'allow's the permission to show desktop notification when asked
                        pLength = Participants.where({USER_MAIL:chat.get('USER_MAIL')}).length
                        userImage = Participants.where({USER_MAIL:chat.get('USER_MAIL')})[pLength-1].get('USER_IMAGE')
                        
                        if(userImage?)
                          notification = window.webkitNotifications.createNotification(userImage, chat.get('USER_MAIL'), chat.get('MESSAGE'))
                          
                        else
                          notification = window.webkitNotifications.createNotification('/images/no-image.jpeg', chat.get('USER_MAIL'), chat.get('MESSAGE'))
                        notification.addEventListener('display',()->
                          window.setTimeout((e)->
                            notification.cancel()
                          , 5000)
                        notification.addEventListener('click',()->
                            console.log('here i want to do the magic. it will take back user to the page where he was chatting')
                            )  
                        )
                        notification.show()

任何想法/帮助/建议将不胜感激。

Answer 1

默认情况下，通知与触发它的窗口/选项卡绑定。 因此，您只需要在单击时告诉它专注于绑定选项卡即可。

添加类似内容的内容

notification.onclick = function() { 
window.focus();    // focus on binding window
this.cancel();     // close the notification on clicking it
};

所以你的最终代码应该看起来像

    if (window.webkitNotifications)
                        havePermission = window.webkitNotifications.checkPermission()
                        if havePermission is 0 && @window_blur
                          if (!(chat.get('USER_MAIL')==LOCAL_DATA.username)) 
                          # 0 is PERMISSION_ALLOWED means the user 'allow's the permission to show desktop notification when asked
                            pLength = Participants.where({USER_MAIL:chat.get('USER_MAIL')}).length
                            userImage = Participants.where({USER_MAIL:chat.get('USER_MAIL')})[pLength-1].get('USER_IMAGE')
                            if(userImage?)
                              notification = window.webkitNotifications.createNotification(userImage, chat.get('USER_MAIL'), chat.get('MESSAGE'))
                            else
                              notification = window.webkitNotifications.createNotification('/images/no-image.jpeg', chat.get('USER_MAIL'), chat.get('MESSAGE'))
                            notification.addEventListener('display',()->
                              window.setTimeout((e)->
                                notification.cancel()
                              , 5000)
                            notification.addEventListener('click',()->
                                console.log('here i want to do the magic. it will take back user to the page where he was chatting')
                                )  
                            )
//--------------------------------------------------------------------//
                            notification.onclick = function() { 
                            window.focus();
                            this.cancel();
                            };
//--------------------------------------------------------------------//
                            notification.show()

干杯！！