Develop Reference

How to make a confirm box appear when user closes or refreshes page

so I'm making a drawing app. the problem is, when the user accidentally closes or refreshes the page, all the drawings will be lost. So I made a confirmation box that will confirm if the user really wants to close the page.
I have tried like this:
if (window.onbeforeunload == true ) {
confirm("Change are still not saved. Are you sure?")
}
But it doesn't work. Then what is the best solution to solve this problem?

onbeforeunload is a function which is called when leaving the page. So you have to define it.
window.onbeforeunload = function()
{
return "Change are still not saved. Are you sure?";
};

how to prevent window back button and close tab with javascript

now im doing laravel project. i want to implement javascript code only for preventing the back button and close tab window. i read the article that we can use onbeforeunload(). but this code not suitable with me. because the warning message will display when i want to go to another link menu on my site..
here is my code
window.onbeforeunload = function() {
return "Do you really want to leave?";
};
above code still have problem to me :
i must click at list 1 time on the side. then click close tab, so the pop up will display. if i dont click, the pop up not display and directly close the tab.
im using opera browser but the custom message not display same as what i type. it display "Changes you made may not be saved.". How do i could display the sentence as same as i type?
is there any other code that just prevent only for back button and close the tab? so went i want to navigate to other link menu on my site, the warning message not display.
please help

//you should $event.return = "";
window.addEventListener("beforeunload", function ($event) {
return $event.returnValue = "";
})

How to have dialogue box appear but without the "Are you sure you want to leave this page?" message in it

I have a page that you are able to save notes.
If a user writes some notes without saving it and tries to navigate away, the dialogue box appears alerting the user that the changes will be lost unless you save it.
The message is as follows:
"You have unsaved changes in the Notes section. Please save your changes or they will be lost. Are you sure you want to leave this page?"
This scenario is fine. However there is a submit buttons on the page (that submits a form), and if the user clicks on the submit button the dialogue box appears with that same message.
In this scenario I want the same message to appear but without the "Are you sure you want to leave this page?". I don't seem to have any control over it. When the submit button is clicked, the same page appears after the form is submitted, which is why I don't want that part of the message to appear.
How do I remove the "Are you sure you want to leave this page?" part of the message?
window.onbeforeunload = function (e) {
var lastClickedElement = document.activeElement;
var submitButtonOne = document.getElementById("submitButton1");
var submitButtonTwo = document.getElementById("submitButton2");
if (!lastClickedElement.isEqualNode(submitButtonOne)) {
if (lastClickedElement.isEqualNode(submitButtonTwo)) {
if ($('#notesTextBox').val() !== currentText) {
return 'I want this dialogue box not to contain "Are you sure you want to leave this page?"';
}
}
if ($('#notesTextBox').val() !== currentText) {
return 'You have unsaved changes in the Notes section. Please save your changes or they will be lost.';
}
}
return null;
};
Explanation of code above - When the window.onbeforeunload is fired and the user is actually trying to navigate away from the page I want the message to appear. When the window.onbeforeunload is fired and if submitButton1 was clicked, I dont want it to do anything. When the window.onbeforeunload is fired and submitButton2 was clicked I want it display the message without the "Are you sure you want to leave this page?" part.

Need two action in chrome extension browser action

I am trying to create one chrome extension with content script interaction. I am facing one problem in the browser action scenario. I have tried to search the solution in the google but vain.
Here is the scenario.
I want two different action when click on the chrome extension icon (browser action). If i have some key stored in local storage, i need to send a message to content script else i need to show popup.
Say for an example, if suppose i am trying to validate whether user is logged in gmail or not. At first time if user didn't logged in i need to show popup with message "please log in" when click on the extension icon. If user already logged in then i will store it in local storage, so if user click again in the icon instead of showing popup need to contact content script.
Please suggest.
EDIT : UPDATING MY CODE HERE
in background.js. (problem is it is not going into the else part. always its showing popup eventhough it has local storage value)
if(localStorage.accessToken=="" || localStorage.accessToken==undefined){
chrome.browserAction.setPopup({
popup : "popup.html"
})
}else{
chrome.browserAction.onClicked.addListener(function(e){
chrome.tabs.query({active: true, currentWindow: true},function(tabs)
{
chrome.tabs.sendMessage(tabs[0].id,{accesskey:localStorage.accessToken},function(response) {});
});
})
console.log('already logged in')
}

The browserAction.onClicked event does not fire when it already has a popup.

It's not entirely clear what you need help with here so I'm guessing based on the wording of your question that you need help with either logic or localStorage.
I don't know a ton about events on the chrome extension icon, but assuming that you can get that event your code ought to look something like the following:
// this code goes inside your icon click handler
if (localStorage.loggedIn === 'loggedIn') {
// do whatever action you want to happen if the user is logged in
} else {
if (/* check to see if logged in goes here*/) {
// user is logged in so store value so you don't have to check again
localStorage.loggedIn = 'loggedIn';
} else {
localStorage.clear('loggedIn');
alert("Please login to gmail first")
}
}
Of course, this code does what you asked, but it doesn't handle the case where the user clicks on the button, was logged in, then logs out at some future point and clicks the button again. The localStorage value wouldn't have been reset in that case, unless you do it elsewhere.

Alert user for unsaved changes in page within panels using jquery

I have a situation here, i need to stop the user if user has left some unsaved changes on the page.
I got some information over the internet for moving from current page to other page like
var warnMessage= "You have unsaved changes";
$('input:not(:button,:submit),textarea,select').change(function () {
window.onbeforeunload = function () {
if (warnMessage != null) return warnMessage;
};
});
$('input:submit').click(function(e) {
warnMessage = null;
});
This works fine when we are closing tab or URL is getting changed.
I have panels on my page as like three different panels;each with a Submit, Cancel and Reset. Now, i need to alert the user when it happens to open a panel; last panel has unsaved changes then user should be alerted
If he/she has some unsaved changes on the panel, submit/reset/cancel button is clicked then also it should confirm by the user.
Is this possible?