How to open "Leave site?" popup? - javascript

someone know how to open this popup using just javascript.enter image description here I know that exists way
window.addEventListener("beforeunload", () => { // Some callback }); but it works only if you really leave page or close tab, reload page. I wan't use this popup in react-router when change routes so basically this is not beforeunload event.
After I added event listener to beforeunload I tried trigger this event but nothing work.

Related

event to be triggered when user leaves ckeditor or page

I have been trying to find an event that will trigger when a user leaves the ckeditor window or page in any way, this is because I want to call my save method inside the event so that when the user does try to leave their content is saved. I have inserted a conditional statement with an alert to test if its working but so far the alert hasn't been called signifying that the event I am currently using is not the correct one
here is my code block:
$(window).on('beforeunload', function() {
updateBlockByName(blockname, escape(newhtml), 1, blockid, disableBlogComment);
if (updateBlockByName) {
alert('unload save test');
}
});
any help is greatly appreciated
Actually beforeunload is broken pretty badly (probably by design) in Blink and it doesn't handle alert or other modal dialogs. If you want to display a message, you can use return:
$( window ).on( 'beforeunload', function() {
return 'Message for the user';
}
It will display a confirm dialog with "Leave page" and "Stay on page" buttons.
Moreover, there is also the unload event, but it's as unreliable as beforeunload. And both of them don't work well on mobile devices.
Probably a good idea is not to rely on detecting the unloading of the page, but rather changes in visibility, via e.g. the pagehide event. It will also handle all cases when the user puts your page in the background and simply forgets about it.
A very detailed article about pagehide, beforeunload, unload and other similar events is available on Ilya Grigorik's site.
And if you want to detect only leaving the editor, you can probably just listen to CKEditor's blur event. It's fired when the user moves the cursor outside of the editor.

Disable popup and call browserAction.onClicked

I am making a Chrome extension with a "default_popup":"popup.html".
Documentation of chrome.browserAction.onClicked says:
Fired when a browser action icon is clicked. This event will not fire
if the browser action has a popup.
I know browserAction.onClicked will not fire in my extension. But can i disable popup so that browserAction.onClicked can fire?
Conclusion : While my extension is running, I want to disable popup and have a chrome.browserAction.onClicked in my background.jsso that later some time I can call browserAction.onClicked. Is it possible? How? Also I would like to know If I can do the reverse meaning disable browserAction.onClicked and enable popup.
You can disable the popup (automatically enabling the dispatch of onClicked events) by setting the popup path to an empty string:
chrome.browserAction.setPopup({popup: ""});
Likewise, you can enable the popup afterwards by providing a valid path:
chrome.browserAction.setPopup({popup: "popup.html"});
You can keep a listener to onClicked regardless - it's just that the event is not always dispatched.
Please note: you can't have the popup disabled, capture the click and then show the popup - you can only change what happens at next click. If you want both a popup and some event in the background, it's best to simply message background from the popup.

Fire onbeforeunload only when window is closed (includes working example)

I want to fire the onbeforeunload event only when the tab or browser is closed and not upon refresh, link click and so on. I found a site where that works: https://checkout.deindeal.ch/
Steps to fire the event in Chrome:
Put something into the cart
Click on "Zur Kasse"
Close tab
onbeforeunload Message is shown and a popup opens. onbeforeunload events like refresh will not fire. I debugged their code, but could not find the place where they exclude those events or whatsoever.
Anyone out there who can find the correct place in the code?
Thanks!
For readers that want to use onbeforeunload,
The event onbeforeunload should be used for preventing user's data loss, like filled in forms and other data that are not saved and will be lost upon page refresh.
Using onbeforeunload to prevent a user from leaving your page is annoying and will not stop the user from leaving.
You can not detect a browser tab refresh button press, unless the user use a shortcut that you can detect with key press (like Ctrl+F5).
More info here :
javascript beforeunload detect refresh versus close
Old answer was removed in order not to mislead anyone (it was not working on nowadays browsers).
More stack overflow links related on onbeforeunload use:
How can i get the destination url in javascript onbeforeunload event?
How to prevent calling onbeforeunload when page refresh
Fire onbeforeunload confirm alert for external sites only

Close a Chrome extension popup by clicking the browser action icon again

I'm developing a Chrome extension and I wanted to know if it is possible to close a popup by simply clicking again the icon that lets you open the popup: I tried anything but it looks like you must click elsewhere to close it. The docs states the onClicked event is:
Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup (http://developer.chrome.com/extensions/browserAction.html#popups).
Thanks in advance.
[UPDATE] I tried the following and it half (!) works:
1. in popup.html I link popup.js;
2. popup.js reads the value of a variable contained in background.js;
var currentStatus = chrome.extension.getBackgroundPage().open;
if(currentStatus==0){
chrome.extension.getBackgroundPage().open=1;
}else{
chrome.extension.getBackgroundPage().open=0;
window.close();
}
What happens: the first click opens the app, the second closes it, BUT it remains a micro popup with no content upon the icon. If I remove that, I reached my goal.
The onClicked event is called if your extension's browser action does not define default_popup in the manifest. That note from the documentation isn't about whether the popup is currently open.
If the manifest defines default_popup then clicking the button again closes and reopens the plugin. The mousedown closes and the mouseup opens. (So clicking on the button and dragging away and releasing the mouse does close the popup, not that anyone should do this.)
I recommend setting default_popup and making a button in the html for the popup that closes the popup with window.close;, or find a point in your popup's use case where closing makes sense.
Well It has been a long time, and the issue/bug still persists on Chrome browsers. I've found a workaround, it's not great, but it does what I need - closes the window on a second icon click. Here's what I did in the popup javascript file:
if(localStorage.getItem('firstClick')==='true'){
localStorage.setItem('firstClick', 'false');
window.close();
}
else {
localStorage.removeItem('firstClick');
localStorage.set('firstClick', 'true')
}

Simulate a document.body click event

I am having a big of an issue.
I have some third party js includes and they popup some info on a button click, that is in an iframe. Of course, I don't have access to this iframe. But the 3rd party captures clicks and closes the iframe popup. So the behaviour is like so -
I am a user, I click on this "3rd party button, an iframe popups up anchored bottom right". Now, if click anywhere on the main parent page (my page), the iframe closes.
Here is the problem. I have some custom form fields/spans etc.... in which I capture the clicks before they bubble up so the document.body never get that "click".
How can I fake this out? I tried "mousedown" and that seems to propagate up. So I then said something like:
jQuery(document.body).mousedown(function(){
jQuery(document.body).click();
})
so, no matter what is mousedown, I try to say there is a click happening. BUT that doesn't work. Not sure why? If I attach that click onto a div and alert - it alerts, but perhaps "natively" it isn't the same.
Any ideas of to truly simulate a body click event when/if the element clicked on has had its native clicked event captures before it can bubble up?
EDIT: I have tried various things.
ie:
<div id="captureclick"></div>
<script>
jQuery(document.body).mousedown(function(){
jQuery("#captureclick").click();
})
</script>
I also tried:
jQuery's trigger function trigger('click');
Not working. I haven't tried using a button as the "click traget", yet.
Thanks.

Categories