According to MDN, the onclose event for Notification API is obsolete:
The following event handlers are still supported as listed in the browser compatibility section below, but are no longer listed in the current spec. It is safe therefore to assume they are obsolete and may stop working in future browser versions.
Notification.onclose
A handler for the close event. It is triggered when the user closes the notification.
Notification.onshow
A handler for the show event. It is triggered when the notification is displayed.
I have script that, under certain circumstances, generates following notification:
X has happened. Click here to deal with it, ignore or close this notification to continue running.
If the user clicks the notification, script is stopped and user can deal with the situation. If the notification is not clicked, the script will continue with it's work after the notification is closed/disappears.
How to do that now that onclose event is deprecated?
Also according to MDN, you should be sending your own close commands because Chrome doesn't do that on its own. It would be trivial to co-opt that to handle the event.
Something like this:
let notification = new Notification('Test Notification');
setTimeout(close(notification), 5000);
function close(n) {
n.close.bind(n);
// your other code...
}
Related
I have a seemingly simple requirement but I have been stuck for days. Can someone give me a hand?
I need a confirmation prompt if the user tried to close the pop-up window
if the user click ok to close, I need to call an ajax call
My original design is to add an onbeforeunload event handler, have it returns a string which triggers a prompt. Works perfectly.
The problem is the next part. Added a unload listener, a pagehide listener, and a visibilitychange listener - in all three cases, Chrome doesn't fire the event if the user close the window, only if I refresh the window. Firefox works perfectly. I am using a sendbeacon call which should work in these scenarios and if I add a breakpoint to pause before the window closes, the beacon is sent, so it seems like Chrome is closing the document too fast and never bother sending the last beacon, which makes the whole exercise pointless.
Has anyone face similar issues and if so, any way to work around it?
I'm struggling with the same problem.
Reading about the event on the documentation I've noticed that it is an unstable event, and moreover in the compatibility table, Chrome is set to "not supported".
But I noticed that chrome fire the event one time only.
If I close the browser and then i re-open it, the first time the event is fired, but it not work with tab closing.
I'm sure I'm missing something relatively simple - but for the life of me I can't find the answer. When trying to do a reload prevention in react, my onbeforeunload function is not firing when I press the reload button in the browser menu (Chrome). It works if I press CMD+R/F5 and once that's done once - the browser button also fires the function. It simply doesn't work if I attempt to click reload first. Additionally, if I navigate through the router once, it also seems to register. I am using the following code to register the refresh on my top level template:
class Template extends React.Component {
constructor(props) {
super(props);
}
refreshPrevent = (e) => {
e.preventDefault();
e.returnValue = true;
}
componentDidMount() {
console.log("registering refresh handlers");
window.addEventListener("beforeunload", this.refreshPrevent );
}
componentWillUnmount() {
window.removeEventListener("beforeunload", this.refreshPrevent);
}
Any ideas would be appreciated.
I don't see any errors in your code. I use similar code in my react applications, but I hadn't tested this particular problem before until you posted.
It seems, according to the MDN documentation that this behavior is normal:
To combat unwanted pop-ups, some browsers don't display prompts
created in beforeunload event handlers unless the page has been
interacted with. Moreover, some don't display them at all.
So, when your app first loads, until you interact with the page in some way, you can hit the browser refresh button and depending on the browser, the page will reload without displaying a prompt.
However, once you have done something on the page with your mouse or keyboard or via touch, then the prompt will be displayed.
The MDN documentation concludes (emphasis added):
Note also, that various browsers ignore the result of the event and do not ask the user for confirmation at all. In such cases, the document will always be unloaded automatically. Firefox has a switch named dom.disable_beforeunload in about:config to enable this behaviour. As of Chrome 60, the confirmation will be skipped if the user has not performed a gesture in the frame or page since it was loaded.
This fits with the spec that we should expect certain situations, like an uninteracted-with page plus refresh, to skip prompting the user:
The user agent is encouraged to avoid asking the user for confirmation if it judges that doing so would be annoying, deceptive, or pointless. A simple heuristic might be that if the user has not interacted with the document, the user agent would not ask for confirmation before unloading it.
I tried this code to open new window browser when user click close tab but it doesn't work
<script>
window.onbeforeunload = function(e) {
window.open("http://google.com");
window.stop();
};
</script>
So, can you give me any way to do that ?
You cannot. Opening a popup in response to the window being closed is forbidden by the specification:
An algorithm is allowed to show a popup if any of the following
conditions is true:
The task in which the algorithm is running is currently processing an
activation behavior whose click event was trusted.
The task in which the algorithm is running is currently running the
event listener for a trusted event whose type is in the following
list:
change
click
dblclick
mouseup
reset
submit
The task in which the algorithm is running was queued by an algorithm
that was allowed to show a popup, and the chain of such algorithms
started within a user-agent defined timeframe.
window.addEventListener("beforeunload", function (e) {
window.open('http://google.com','new','width=600,height=400,toolbar=1')
});
Guess that's the way.
Notice that most of browsers block pop-up windows by default.
I'm trying to do something every time a new tab opens up, both via firefox starting and when a new tab is added after firefox starts. I've been following the example at:
https://developer.mozilla.org/en/Code_snippets/Tabbed_browser
So I have
var container = gBrowser.tabContainer;
container.addEventListener("TabOpen", tabAdded, false);
container.addEventListener("TabClose", tabClosed, false);
function tabAdded(event) {
alert("tabAdded!");
var browser = gBrowser.getBrowserForTab(event.target);
browser.pollingService = new PollingService(createGuid());
browser.pollingService.start();
}
And I have a similar function for the close. This works fine for when tabs are actually opened/closed, but I've run into a couple of problems.
Firstly, when Firefox opens, it has that initial tab already open, but the tabAdded event never fires for it. Similarly, when I shut down firefox, it never fires the TabClose for those tabs.
It seems like the correct thing to do in this case is to go through all of the tabs that are in the gBrowser.tabContainer and add my service to them as well, and do something similar for when Firefox closes. Unfortunately, I'm not quite sure how to hook in to know when Firefox closes (It's also possible there's a much better way to handle this, but I can't think of one).
Secondly, gBrowser.tabContainer can be uninitialized sometimes when my initialization script runs; is there a particular event I should be listening to to know when I can safely add listeners to the tabContainer?
Use a load event listener to give the window time to be ready for you to add your Tab event listeners and create the polling service for the existing tab. Then use an unload event listener to do your cleanup.
I want to show a message whenever you are leaving the page (not an annoying alert, just some html telling you to wait), in thinking about it I'm facing certain difficulties:
when the user presses Stop in the
browser, cancelling the navigate-away
action, I'd like the message to go
away.
whenever any link is clicked, the message should appear.
it shouldn't capture when the clicked link just opens another tab ( ignore _blank target )
that being said, firing the event is pretty simple, with just something like
$(document).unload(function()
{
// display message
});
the problem being that if the user cancels, the message wouldn't go away.
a possible fix would be:
$(window).unload(function()
{
// display message
setTimeout(function()
{
// hide message
},5000);
});
but I wanted to know if there was a cleaner way, that just when the user cancels the navigation (or it fails for any other reason), I can hide the message.
Edit #2:
I just noticed that with the above code, in FF the message isn't displayed until the page is left, at which point if the user presses Stop, he will receive about:blank. If he presses Stop before that, then the message is never displayed. Which is exactly what I wanted.
In internet explorer the message is never displayed, I'm assuming that's because IE handles stuff differently. I wonder what happens in chrome?
As to the first point:
when the user presses Stop in the browser, cancelling the navigate-away action, I'd like the message to go away.
I had the same question a while back, and the resounding response - also backed by my subsequent research - was that this is impossible. Once you start a request for a new page, it's impossible to reliably "come back" from it programmatically. A timeout may indeed be the only way to go.
The two other points, though, should be relatively straightforward: Walk through every link (e.g. using jQuery), and add a click event that opens the confirmation window, and returns false so that the original href isn't opened. It should also be relatively easy to do this for internal links only (check for the target property, if it's _blank, leave the link alone.)
It may become tough to deal with links that already have click events, though, and other events leading to a different page like form submissions.
Here is a solution that works in all browsers. It uses the document.readyState attribute which works in all browsers except early versions FireFox (works in version 3.6.8). If the browser supports the readyState attribute it will check if the readyState is load (browser is going to another page) or is complete (or something else indicating that the page is not going anywhere). If the browser does not support the readyState then it will default to your solution.
(function(){
var hideMessage=document.readyState?function(){
setTimeout(function(){
if(document.readyState=='loading'){
hideMessage();
}else{
//hide message
}
},500);
}:function(){
// hide message
}
function displayMessage(){
// display message
}
window.onbeforeunload=function(){
displayMessage();
setTimeout(hideMessage,document.readyState?10:5000);
};
}());