如何在瀏覽器或選項卡關閉時獲取Web通知

當瀏覽器關閉或瀏覽器選項卡關閉時，我需要獲取Web通知。如何在瀏覽器或選項卡關閉時獲取Web通知

我的代碼如下;通知工作時，該網站是開放的，而不是在瀏覽器或關閉標籤：

<!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>

來源

2016-08-23 Jitesh

能否請你解釋一下嗎？當他要關閉標籤時是否要通知用戶（或定時關閉標籤按鈕）？ – M98

是的，如果我是關閉瀏覽器，然後需要來通知，但在上面的代碼不來通知當瀏覽關閉 – Jitesh

Onbeforeunload是你正在尋找的事件 - 也許 - 很難說，因爲我不知道你的代碼必須做什麼隨着你的問題 –

如果我理解正確的話，你可以聽onbeforeunload或onunload當用戶關閉標籤或點擊檢測在go back按鈕上。

下面是一個簡單example

有一些方法來做到這一點，你可以設置onbeforeunload作爲HTML屬性，如：

<body onbeforeunload="return showAlert()">

注：showAlert（）是一個函數，將返回字符串，並且該字符串將只是在某些瀏覽器中的消息（我看到，只是Microsoft Edge不支持定製消息）

或者您可以通過addE ventListener。但是你不能在Firefox或Chrome 自己的消息（邊緣會顯示你的信息，你的函數將返回，它應該是一個字符串）

對於

來源

2016-08-23 05:45:16 M98

當瀏覽器關閉時，我沒有收到通知。如何在瀏覽器或選項卡關閉時獲取通知。你可以運行我的代碼和檢查 – Jitesh

他預計通知不'onbeforeunload' @Kermani – Karthi

@KarthiVenture正確，但他說：**如何獲得網絡通知時，我有關閉瀏覽器或關閉選項卡**，唯一的辦法，你有訪問*瀏覽器關閉事件*使用'onbeforeunload'或'onunload'。 – M98

如何在瀏覽器或選項卡關閉時獲取Web通知

回答

相關問題