Develop Reference

Confirmation on close or refresh page not working at all

When the user closes the tab or refreshes the page, the site must display a popup to confirm this.
I tried this code:
window.onbeforeunload = function (e) {
return confirm("Are you sure you want to leave this page?");
};
This didn't work in either firefox or chrome.
In firefox no popup came up. And in chrome the default one didn't get overridden either.
I even tried using the following code but to no avail:
window.onbeforeunload = function (e) {
var dialogText = 'Are you sure about this?';
e.returnValue = dialogText;
return dialogText;
};
How do I solve this issue?
Any code snippets would be helpful. Thank you.

I found this snippet on the internet:
window.onbeforeunload = function (e) {
return "Please click 'Stay on this Page' if you did this unintentionally";
};
This is working perfectly as required.
I found out that you actually don't need to add any confirm call. If you just return a string, this will prompt the browser to confirm leaving the page. Most commercial browsers have this functionality supported by default.

From Firefox's documentation:
To combat unwanted pop-ups, browsers may not display prompts created in beforeunload event handlers unless the page has been interacted with.
You cannot show pop-up if user didn't interacted with the page before.

Starting with Firefox 4, Chrome 51, Opera 38 and Safari 9.1, a generic string not under the control of the webpage will be shown instead of the returned string. For example, Firefox displays the string "This page is asking you to confirm that you want to leave - data you have entered may not be saved."
-- from Mozilla Developer Docs

Disable close and minimize option

Am a beginner to javascript, i have a doubt on this following :-
How to disable print popup window close button and minimize.Am working on a web application using java script.
As we all know print function will show a popup and it has a minimize and close button by default.
Is there any way to disable minimize and close button programmatically.
Is there exist any javascript method to do this?
myWindow.print();
Thanks,
Please help.

The 'print' window is created by your browser, not by Javascript (Javascript just says 'hi browser, could you print this for me?). Luckily, browsers do not allow the 'close' and 'minimize' button to be disabled, as this would create a VERY unfriendly user experience (just imagine sites that 'force' you to print a million pages for them). So, there's no 'how to' answer to your question, and that makes the world a better place.

I think print page help user to print it, so you take them to print page instead of minimizing it.. It will automatically go to print page..
function PrintWindow()
{
window.print();
CheckWindowState();
}
function CheckWindowState()
{
if(document.readyState=="complete")
{
window.close(); //you can edit it as you want
}
else
{
setTimeout("CheckWindowState()", 2000);
}
}
PrintWindow();

Can I stop JS location.href without a popup?

I want to build a JS external script ( tag) which stops code (which usually isn't mine) like location.href from happening without the use of a popup.
I tried things like:
$(window).bind('beforeunload', function() {
window.stop();
event.stopImmediatePropagation();
event.preventDefault();
location.href = '#';
});
but nothing seemed to help.
again, I need it without the use of the: return "are you sure?"
maybe a different callback?
Thanks,
Dan

The right way to use onbeforeunload to confirm navigating away is to just return the string of the message you want to have shown. MDN has this to say.
The function should assign a string value to the returnValue property of the Event object and return the same string
So your onbeforeunload function for the behavior you ask for would just be (same as binding it with jquery, especially since onbeforeunload does not support multiple event listeners like other events do)
window.onbeforeunload = function() {
return "Are you sure?";
};
But ironically, Firefox doesn't support this for security purposes.
Note that in Firefox 4 and later the returned string is not displayed to the user. See bug 588292.
Edit: I read more of the bug report. The main reason they site for this decision is: "1. Remove the site-supplied text, since this is a security issue (untrusted text in browser dialogs)". I wonder how they feel about an alert?
Most modern browsers (Chome, IE 9+ or earlier, and Opera, I know for sure) will ignore anything you try to do in an onbeforeunload function other than returning a string for display. This is to prevent hijacking the users browser, opening popups, overriding navigation attempts by pointing the user another, possibly malicious domain, etc.
Edit 2: I was apparently incorrect. Only some things are disallowed in onbeforeunload, they just happen to mainly be the types of things you tried in your sample code, having to do with event propagation and page navigation. From deep in the comments of that FF bug report, user oyasumi posts a link to this jsFiddle with a work around for displaying custom text to FF 4+ users: http://jsfiddle.net/ecmanaut/hQ3AQ/ So apparently calling alert() is still allowed, even in onbeforeunload, which hilariously is doing exactly what the was original reason for the 'bug' "fix": displaying custom text in a browser/application/OS/official-looking dialog.

did you try to use "return false" ?
Also you should have the event sent to your function.
here is an example where you can prevent from a button click and hyper link
<input type="button" value="click me" />
google
$(document).ready(function(){
$('input[type="button"]').click(function(e){
e.preventDefault();
});
$('a').click(function(e){
e.preventDefault();
});
});
here is the link http://jsfiddle.net/juTtG/143/

How to trigger javascript on print event?

Is it possible to trigger a javascript event when a user prints a page?
I would like to remove a dependancy on a javascript library, when a user opts to print a page, as the library is great for screen but not for print.
Any idea how to achieve this?

For anyone stumbling upon this answer from Google, let me try to clear things up:
As Ajay pointed out, there are two events which are fired for printing, but they are not well-supported; as far as I have read, they are only supported in Internet Explorer and Firefox (6+) browsers. Those events are window.onbeforeprint and window.onafterprint, which (as you'd expect) will fire before and after the print job.
However, as pointed out in Joe's link (https://stackoverflow.com/a/9920784/578667), that's not exactly how it is implemented in all cases. In most cases, both events fire before the dialog; in others, script execution might be halted during the print dialog, so both events may fire at the same time (after the dialog has been completed).
For more information (and browser support) for these two events:
https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeprint
https://developer.mozilla.org/en-US/docs/DOM/window.onafterprint
The short answer: if you're hoping to interfere with the print flow, don't. If you're hoping to trigger code after printing, it's not going to work how you're wanting; expect poor browser support, and try to degrade gracefully.

It can be done by overwriting, e.g., window.onbeforeprint.
Using Chrome, I found that the more arcane window.matchMedia("print").addListener(function() {alert("Print Dialog open.")}) also works.
This debatable feature can be used in order to deter users from printing a page.
I've encountered it the first time on Scribd. There, if you open the print dialog using the menu command, the page content will be greyed out and a warning pop-over message appears explaining why you can not print the page. (Note for complete analysis: on that page, control-p is also overriden so you can not use it to open the print dialog at all. Additionally, there is a #media CSS for printer output that hides the content; all tested on Firefox).

I have implemented for disabling printing using window.onbeforeprint()
/*Block printing*/
window.onbeforeprint = (event) => {
console.log("onbeforeprint function");
printDiabled();
};
function printDiabled() {
var headstr = " <span style='font-size: large; font - weight: bold; color: Red''>PRINT IS DISABLED</span>";
//var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr;
}
/*Block printing*/

if you have a scenario where u want to do something before print dialog appears or just after the document is sent to printer queue use can use the below events
window.onafterprint , window.onbeforeprint

For anyone coming here looking for an option using Bootstrap as I was, I used the following code to achieve this when a print button is clicked. This won't work when they press CTRL + P.
$("#print_page").click(function(){
$("#print_section").addClass('visible-print-block');
window.print();
$("#print_section").removeClass('visible-print-block');})
You need to add hidden-print to anything you don't want printed and then add an ID (or a class if you have more than one section) of print_section to the bit you want printed! Bit hacky but it works!

set the focus of a popup window every time

I have two pages one.html and two.html
I am opening a new window using following code
//here popup is a global variable
popup=window.open('two.html','two');
for the first time a popup window open successfully and get the focus but
if I try to open it again without closing already opened popup then two.html is not getting focus for the second time.
note: I have set popup window's name as 'two'

You can use the focus function, as used below:
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
if (!newwindow.closed) {newwindow.focus()}
return false;
}
// -->
</script>

focusedWindow = window.open('two.html','two').focus();
Directly append the focus() to the window.open protoype

My empiric solution that always works:
setTimeout('detail.focus()', 1);
Appending .focus() right after open does not always work, nor calling a .focus() without setTimeout.
I know it's ugly (wanted to get rid of it right now, after some years, with no success), and I do not know the exact reasons why and how, but it works.

You can close the popup before you open it if you check to see if the popup is already open when you call the function.
var popup;
​function openPop() {
if ("close" in popup) popup.close();
popup = window.open("http://stackoverflow.com", "test", "width=200, height=200");​​​​​​​​
}
​This will ensure the popup always appears on top.

var win = window.open('two.html','two');
win.document.getElementsByTagName("body")[0].focus(); //focus the body rather than the window.

Check your Firefox 2 settings at
Go to Tools -> Options -> Content
Make sure "Enable JavaScript" is turned on.
Next to "Enable JavaScript", click the "Advanced" button.
Make sure that there is a check-mark in the box
[x] Raise or lower windows
If the setting "Raise or lower windows" is turned off, then
this disables the window.focus() method.

I found an answer for myself that works. In the html of the popup body, add to the body tag onload="this.window.focus()". Even if you minimize the window, it pops back up front and center. Be sure and name the window in your execution script window.open('url','some name','vars'); Hope this helps you!

Unfortunately some modern browsers still don't support focusing tabs, see this Firefox bug entry, for example.
However, the following code is working well for me. As a workaround, it reopens a window/tab if it cannot be focussed:
var win = window.open("two.html", "two")
win.focus();
setTimeout(function() {
if(document.hasFocus()) {
win.close();
window.open("two.html", "two")
}
}, 1);
In the first line it opens the window and tries to focus it using the second line. If a window with the name two is already there, no new window/tab is opened, but it's reused.
The trick now is, that we check if the current window still has focus using document.hasFocus(). If so, we close the window and reopen it. This is only for browsers which don't support focusing the tab which is to be reused directly. Currently, this is the case for FF and IE/MS Edge. Chrome works well.
However, directly after using window.open, document.hasFocus() always returns true (so said, also in Chrome). The workaround is to use setTimeout one ms later.

just add .focus() to the window.open line
window.open('two.html','two').focus()
I did have same problem and this seems to work in both Firefox and Chromium web browsers.
In my web thaiiceland.com I noticed that if the popup was open, the focus didn't go on the popup and you feel nothing happen when you click on that link. So I search and after try to just add .focus() in the end of the window.open line it works.
Curency converter - แปลงสกุลเงิน

setTimeout(function () {
window.open('PageName', '', 'height=560,width=1120,resizable=no,left=100,top=50,screenX=100,screenY=50');
}, 100);
-> This code is use for giving focus on newly open window.
-> Put it in javascript.('setTimeout is inbuilt function of javascript')
-> Many time happen that when popup window is opened, it will go behind the old window, So above is very useful to focus for new window.

It is a one liner solution, use focus on your pop up var:
popup=window.open('two.html','two');
popup.focus();
This will always open your pop up window even if it is not closed.