当浏览器或选项卡关闭时如何获得Web通知

Question

当浏览器或选项卡关闭时如何获得Web通知

javascriptphpjquerypush-notificationnotifications

3

当浏览器关闭或标签页关闭时，我需要收到网页通知。

以下是我的代码；在网站打开时，通知有效，但在浏览器或标签页关闭时无效：

 <!DOCTYPE html>
    <html>
    <head>
    <title>Display browser Notification from Web Application Demo</title>
    <script type="text/javascript">

var articles = [
["HOW TO GET RS 2000 LENSKART GIFT VOUCHER FOR 890 USING NEARBUY LENSKART OFFER.","http://www.findyoursolution.in/get-rs-2000-lenskart-gift-voucher-890-using-nearbuy-lenskart-offer/"],
["HOW TO GET RS 100 CASHBACK ON RS 500 RECHARGE AND BILLS PAYMENT AT PAYZAPP APP.","http://www.findyoursolution.in/get-rs-100-cashback-rs-500-recharge-bills-payment-payzapp-app/"],
["HOW TO GET 500MB 3G-2G DATA FOR FREE BY USING AIRCEL FREE INTERNET TRICK","http://www.findyoursolution.in/get-500mb-3g2g-data-free-using-aircel-free-internet-trick/"],
["HOW TO AVAIL NEARBUY PVR CINEMA OFFER","http://www.findyoursolution.in/avail-nearbuy-pvr-cinema-offer/"],
["GIVE STRATEGIC IMPORTANCE TO INDIAN TELECOM SECTOR: DELOITTE HASKINS SELLS ON BUDGET EXPECTATIONS.","http://www.findyoursolution.in/give-strategic-importance-to-indian-telecom-sector-deloitte-haskins-sells-on-budget-expectations/"],
["AIRTEL TRICK UNLIMITED GUJRAT 3G 4G UDP TRICK","http://www.findyoursolution.in/airtel-trick-unlimited-gujrat-3g-4g-udp-trick-4920012-port/"],
["HOW TO DOWNLOAD MYVODAFONE APP AND GET 100MB 3G DATA.","http://www.findyoursolution.in/download-myvodafone-app-get-100mb-3g-data/"],
["HOW TO GET RS 20 FREE RECHARGE FROM AGROSTAR APP.","http://www.findyoursolution.in/get-rs-20-free-recharge-agrostar-app/"],
["WHAT ARE THE NAMES OF SNOW WHITE SEVEN DWARFS.","http://www.findyoursolution.in/names-snow-whites-seven-dwarfs/"]
];    

setTimeout(function(){ 
var x = Math.floor((Math.random() * 10) + 1);
var title=articles[x][0];
var desc='Most popular article.';
var url=articles[x][1];
notifyBrowser(title,desc,url);
}, 200000);    

document.addEventListener('DOMContentLoaded', function () 
{

if (Notification.permission !== "granted")
{
Notification.requestPermission();
}

document.querySelector("#notificationButton").addEventListener("click", function(e)
{
var x = Math.floor((Math.random() * 10) + 1);
var title=articles[x][0];
var desc='Most popular article.';
var url=articles[x][1];
notifyBrowser(title,desc,url);
e.preventDefault();
});

//===================================
setInterval(function(e){ 
var x = Math.floor((Math.random() * 10) + 1);
var title=articles[x][0];
var desc='Most popular article.';
var url=articles[x][1];
notifyBrowser(title,desc,url);
e.preventDefault();

}, 5000);
//===================================
});

function notifyBrowser(title,desc,url) 
{
if (!Notification) {
console.log('Desktop notifications not available in your browser..'); 
return;
}
if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
else {
var notification = new Notification(title, {
icon:'http://i2.wp.com/www.findyoursolution.in/wp-content/uploads/2016/06/cropped-Logo-512.jpg?fit=180%2C180',
body: desc,
});

// Remove the notification from Notification Center when clicked.
notification.onclick = function () {
window.open(url);      
};

// Callback function when the notification is closed.
notification.onclose = function () {
console.log('Notification closed');
};    
}
}

</script>    

<style type="text/css">
.hover{background-color: #cc0000}
 #container{ margin:0px auto; width: 800px} 
.button {
 font-weight: bold;
    padding: 7px 9px;
    background-color: #5fcf80;
    color: #fff !important;
    font-size: 12px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    cursor: pointer;
    text-decoration: none;
    text-shadow: 0 1px 0px rgba(0,0,0,0.15);
    border-width: 1px 1px 3px !important;
    border-style: solid;
    border-color: #3ac162;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
}
.authorBlock{border-top:1px solid #cc0000;}
</style>
</head>
<body>
<div id="container">
<h1>Display browser Notification from Web Application Demo</h1>  

<h4>Click notification button</h4>
<a href="#"  id="notificationButton" class="button">Notification</a>
</div>   

</body>
</html>

- Jitesh

请问你能详细解释一下吗？当用户要关闭标签页（或点击关闭标签页按钮）时，您是否想通知用户？ - Mohammad Kermani

如果我关闭浏览器，就需要收到通知，但是在上面的代码中，当浏览器关闭时没有收到通知。 - Jitesh

1

Onbeforeunload 是你正在寻找的事件 - 可能是 - 很难说，因为我不知道你的代码与你的问题有什么关系。 - Jaromanda X

尝试这个：https://dev59.com/gFsX5IYBdhLWcg3wjv-f - Karthi

我已经重新措辞了你的问题，使其更易读。如果您需要进一步澄清，请随时编辑您的问题以进一步改进它。 - Vince Bowdren

嘿 @Jitesh，你有解决方案吗？我也在寻找同样的东西。 - vikash

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohammad Kermani · Answer 1

如果我理解正确，您可以监听 onbeforeunload 或 onunload 以检测用户何时关闭选项卡或单击 返回 按钮。

这里是一个简单的示例

有一些方法可以实现它，您可以将 onbeforeunload 设置为 HTML 属性，例如：

<body onbeforeunload="return showAlert()">

注意：showAlert()是一个返回字符串的函数，该字符串将成为某些浏览器中的消息（我发现只有Microsoft Edge不支持自定义消息）

或者您可以通过addEventListener来实现。但是在Firefox或Chrome上无法使用自己的消息 （Edge将显示您的函数将返回的消息，它应该是一个字符串）

对于