关闭浏览器或选项卡时如何获取 Web 通知
Posted
技术标签:
【中文标题】关闭浏览器或选项卡时如何获取 Web 通知【英文标题】：How to get Web Notification when browser or tab is closed 【发布时间】：2016-08-23 05:37:35 【问题描述】：当浏览器关闭或浏览器选项卡关闭时，我需要获得网络通知。
我的代码如下；通知在网站打开时有效，但在浏览器或选项卡关闭时无效：
<!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">
.hoverbackground-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;
.authorBlockborder-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>
【问题讨论】：
您能解释一下吗？您想在用户关闭标签时通知用户（或计时关闭标签按钮）吗？ 是的，如果我关闭浏览器，则需要来通知，但在上面的代码中，当浏览关闭时没有通知 Onbeforeunload 是您正在寻找的事件 - 也许 - 很难说，因为我不知道您的代码与您的问题有什么关系 试试这个***.com/questions/33687298/… 我已经改写了您的问题，使其更具可读性。如果您有任何进一步的说明，请随时edit您的问题以进一步改进。 【参考方案1】：如果我理解正确，您可以听onbeforeunload 或onunload 来检测用户何时关闭选项卡或单击go back 按钮。
这是一个简单的example
有一些方法可以做到，你可以将onbeforeunload设置为HTML属性，比如：
<body onbeforeunload="return showAlert()">
注意：showAlert() 是一个会返回字符串的函数，字符串会是一些浏览器中的消息（我看到了，只是 Microsoft Edge 不支持自定义消息）
或者你可以通过 addEventListener 来实现。但是您不能在 Firefox 或 Chrome 上拥有自己的消息 （Edge 会显示您的消息，即您的函数将返回，它应该是一个字符串）
对于
【讨论】：
浏览器关闭时我没有收到通知。浏览器或选项卡关闭时如何获取通知。您可以运行我的代码并检查 @KarthiVenture 是的，但是他说：当我关闭浏览器或关闭标签时如何获取 Web 通知，并且您可以访问 浏览器关闭的唯一方法事件正在使用onbeforeunload或onunload。
是的，但通知与警报不同，对吧？ onbeforeunload 只需说 STAY 或 LEAVE 。 @Kermani
@KarthiVenture，是的，网络通知不同，但访问用户浏览器“关闭”事件的唯一方法是 onbeforeunload 或 onunload
@KarthiVenture 这里有一篇来自 David Walsh 的关于 Web Notifications API davidwalsh.name/demo/notifications-api.php 的非常好的文章以上是关于关闭浏览器或选项卡时如何获取 Web 通知的主要内容，如果未能解决你的问题，请参考以下文章
关闭运行颤振应用程序的浏览器选项卡时，有没有办法显示警告对话框？