单击 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()

干杯！！