We Keep Coding

How to get Chrome to throw exception when changing url if it fails

I have a reference to a new window opened with js
var theNewTab="";
theNewTab = window.open(theURL, 'winRef');
then I change the url in the as the user clicks on another link in the parent window using
theNewTab.location.href = targetLink;
theNewTab.focus();
The problem i'm having with chrome that id doesn't throw exception if the the window doesn't exist anymore "closed" unlink FF & IE which im using to open the window again.
try {
theNewTab.location.href = targetLink;
theNewTab.focus();
}catch(err) {
theNewTab = window.open(theURL, 'winRef');
theNewTab.focus();
}
PS: I tried to use "window.open" every time but if the window already open, id does not reload the page or it does but it doesn't re-execute the script I have in document ready I think.

I'm not sure what you need.
<script type="text/javascript">
var theNewTab = null;
function openNewTab(theURL) {
if (theNewTab == null || theNewTab.closed == true) {
theNewTab = window.open(theURL);
} else {
theNewTab.location.href = theURL;
}
theNewTab.focus();
};
// use the function when you need it
$('a').click(function() {
openNewTab($(this).attr('href'));
});
</script>
Is this example helpful for you?

catch the event of the print from the print dialog box [duplicate]

In my application, I tried to print out a voucher page for the user like this:
var htm ="<div>Voucher Details</div>";
$('#divprint').html(htm);
window.setTimeout('window.print()',2000);
'divprint' is a div in my page which store information about the voucher.
It works, and the print page pops up. But I want to advance the application once the user clicks 'print' or 'close' in the browser's pop-up print dialog.
For example, I'd like to redirect user to another page after pop up window is closed:
window.application.directtoantherpage();//a function which direct user to other page
How can I determine when the pop up print window is closed or print is finished?

You can listen to the afterprint event.
https://developer.mozilla.org/en-US/docs/Web/API/window.onafterprint
window.onafterprint = function(){
console.log("Printing completed...");
}
It may be possible to use window.matchMedia to get this functionality in another way.
(function() {
var beforePrint = function() {
console.log('Functionality to run before printing.');
};
var afterPrint = function() {
console.log('Functionality to run after printing');
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
}());
Source: http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

On chrome (V.35.0.1916.153 m) Try this:
function loadPrint() {
window.print();
setTimeout(function () { window.close(); }, 100);
}
Works great for me. It will close window after user finished working on printing dialog.

compatible with chrome, firefox, opera, Internet Explorer
Note: jQuery required.
<script>
window.onafterprint = function(e){
$(window).off('mousemove', window.onafterprint);
console.log('Print Dialog Closed..');
};
window.print();
setTimeout(function(){
$(window).one('mousemove', window.onafterprint);
}, 1);
</script>

See https://stackoverflow.com/a/15662720/687315. As a workaround, you can listen for the afterPrint event on the window (Firefox and IE) and listen for mouse movement on the document (indicating that the user has closed the print dialog and returned to the page) after the window.mediaMatch API indicates that the media no longer matches "print" (Firefox and Chrome).
Keep in mind that the user may or may not have actually printed the document. Also, if you call window.print() too often in Chrome, the user may not have even been prompted to print.

window.print behaves synchronously on chrome .. try this in your console
window.print();
console.log("printed");
"printed" doesn't display unless the print dialog is closed(canceled/saved/printed) by the user.
Here is a more detailed explanation about this issue.
I am not sure about IE or Firefox will check and update that later

You can detect when window.print() is finished simply by putting it in another function
//function to call if you want to print
var onPrintFinished=function(printed){console.log("do something...");}
//print command
onPrintFinished(window.print());
tested in Firefox,Google chrome,IE

This Actually worked for me in chrome. I was pretty suprised.
jQuery(document).bind("keyup keydown", function(e){
if(e.ctrlKey && e.keyCode == 80){
Print(); e.preventDefault();
}
});
Where Print is a function I wrote that calls window.print(); It also works as a pure blocker if you disable Print();
As noted here by user3017502
window.print() will pause so you can add an onPrintFinish or onPrintBegin like this
function Print(){
onPrintBegin
window.print();
onPrintFinish();
}

Tested IE, FF, Chrome and works in all.
setTimeout(function () { window.print(); }, 500);
window.onfocus = function () { setTimeout(function () { window.close(); }, 500); }

Given that you wish to wait for the print dialog to go away I would use focus binding on the window.
print();
var handler = function(){
//unbind task();
$(window).unbind("focus",handler);
}
$(window).bind("focus",handler);
By putting in the unbind in the handler function we prevent the focus event staying bond to the window.

Simplest way to detect if print has finished and close print window:
window.onafterprint = function(){
window.onfocus = function(){
window.close();
}
};

Print in new window with w = window.open(url, '_blank') and try w.focus();w.close(); and detect when page is closed. Works in all browsers.
w = window.open(url, '_blank');
w.onunload = function(){
console.log('closed!');
}
w.focus();
w.print();
w.close();
Window close after finish print.

It works for me with $(window).focus().
var w;
var src = 'http://pagetoprint';
if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
w = $('<iframe></iframe>');
w.attr('src', src);
w.css('display', 'none');
$('body').append(w);
w.load(function() {
w[0].focus();
w[0].contentWindow.print();
});
$(window).focus(function() {
console.log('After print');
});
}
else {
w = window.open(src);
$(w).unload(function() {
console.log('After print');
});
}

I think the window focus approach is the correct one. Here is an example in which I wanted to open a PDF url blob in a hidden iframe and print it. After printed or canceled, I wanted to remove the iframe.
/**
* printBlob will create if not exists an iframe to load
* the pdf. Once the window is loaded, the PDF is printed.
* It then creates a one-time event to remove the iframe from
* the window.
* #param {string} src Blob or any printable url.
*/
export const printBlob = (src) => {
if (typeof window === 'undefined') {
throw new Error('You cannot print url without defined window.');
}
const iframeId = 'pdf-print-iframe';
let iframe = document.getElementById(iframeId);
if (!iframe) {
iframe = document.createElement('iframe');
iframe.setAttribute('id', iframeId);
iframe.setAttribute('style', 'position:absolute;left:-9999px');
document.body.append(iframe);
}
iframe.setAttribute('src', src);
iframe.addEventListener('load', () => {
iframe.contentWindow.focus();
iframe.contentWindow.print();
const infanticide = () => {
iframe.parentElement.removeChild(iframe);
window.removeEventListener('focus', infanticide);
}
window.addEventListener('focus', infanticide);
});
};

It is difficult, due to different browser behavior after print. Desktop Chrome handles the print dialogue internally, so doesn't shift focus after print, however, afterprint event works fine here (As of now, 81.0). On the other hand, Chrome on mobile device and most of the other browsers shifts focus after print and afterprint event doesn't work consistently here. Mouse movement event doesn't work on mobile devices.
So, Detect if it is Desktop Chrome,
If Yes, use afterprint event. If No, use focus based detection. You can also use mouse movement event(Works in desktop only) in combination of these, to cover more browsers and more scenarios.

well, just to remind everyone that the afterprint will not determine the print action button instead it will execute whenever the print window is closed or closing, both cancel button or esc key which closing the print window will consider afterprint while there is no actual print happening yet.

Implementing window.onbeforeprint and window.onafterprint
The window.close() call after the window.print() is not working in Chrome v 78.0.3904.70
To approach this I'm using Adam's answer with a simple modification:
function print() {
(function () {
let afterPrintCounter = !!window.chrome ? 0 : 1;
let beforePrintCounter = !!window.chrome ? 0 : 1;
var beforePrint = function () {
beforePrintCounter++;
if (beforePrintCounter === 2) {
console.log('Functionality to run before printing.');
}
};
var afterPrint = function () {
afterPrintCounter++;
if (afterPrintCounter === 2) {
console.log('Functionality to run after printing.');
//window.close();
}
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function (mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
}());
//window.print(); //To print the page when it is loaded
}
I'm calling it in here:
<body onload="print();">
This works for me.
Note that I use a counter for both functions, so that I can handle this event in different browsers (fires twice in Chrome, and one time in Mozilla).
For detecting the browser you can refer to this answer

Disable link after child window is open, restore once child window is closed

My client has a link on their website which opens a customer service chat window in a popup. They are seeing users clicking the chat link multiple times, which opens multiple chat sessions, and it is throwing off their stats. I need to disable the link when the chat window is opened, and restore it when the chat window has been closed. I can't modify/access child window.
The original link looks like this:
<a class="initChat" onclick="window.open('https://chatlinkhere.com','chatwindow','width=612,height=380,scrollbars=0'); return false;">
I figured the best thing to do would be to store the window.open() as a variable in a function:
function openChat() {
child = window.open('http://www.google.com', 'chatwindow', 'width=612,height=380,scrollbars=0,menubar=0');
}
and change the link HTML to
<a class="initChat" onclick="openChat();">
Note: Ideally, I'd like to detect the original onclick's value, and store it in a variable. Something like:
jQuery('.initChat').find().attr('onclick');
But I'm not sure how to store it and then call it later.
Next I need to run a check to see if the chat window is open or not:
timer = setInterval(checkChild, 500);
function checkChild() {
if (child.open) {
alert("opened");
jQuery(".initChat").removeAttr("onclick");
jQuery(".initChat").css("opacity", ".5");
clearInterval(timer);
}
if (child.closed) {
alert("closed");
jQuery(".initChat").attr('onclick', 'openChat(); checkChild();');
jQuery(".initChat").css("opacity", "1.0");
clearInterval(timer);
}
}
Note: the alerts are just there for testing.
And add the new function to the link
<a class="initChat" onclick="openChat(); checkChild();">
And once the chat window is closed, I need to restore the onclick attribute to the link (is there an easier way to do this?)
Fiddle demo is here -> http://jsfiddle.net/JkthJ/
When I check Chrome Console I'm getting error
Uncaught TypeError: Cannot read property 'open' of undefined
UPDATE
Whoever left me the answer in http://jsfiddle.net/JkthJ/2/ thank you very much it works! :)

i think you need is open pop up if already open then foucus on pop up or noyhing should happen
you can rewrite your function as
var winPop = false;
function OpenWindow(url){
if(winPop && !winPop.closed){ //checks to see if window is open
winPop.focus(); // or nothing
}
else{
winPop = window.open(url,"winPop");
}
}

just do it in a simple way. disable the mouse events on anchor link after child window open.
css
.disableEvents{
pointer-events: none;
}
js
var childWindow;
$('a').on('click',function(){
childWindow = window.open('_blank',"height:200","width:500");
$(this).addClass('disableEvents');
});
if (typeof childWindow.attachEvent != "undefined") {
childWindow.attachEvent("onunload", enableEvents);
} else if (typeof childWindow.addEventListener != "undefined") {
childWindow.addEventListener("unload", enableEvents, false);
}
enableEvents = function(){
$('a').removeClass('disableEvents');
};
update
your child window is plain html page. Do the changes in child window html code:
<html>
<head>
<script>
function myFunction()
{
window.opener.enableEvents(); //it calls enableEvents function
}
</script>
</head>
<body onunload="myFunction()">
<!--your content-->
</body>
</html>

This is what I got to finally work:
<a class="initChat" onclick="checkWin()"></a>
<script>
var myWindow;
function openWin() {
myWindow = window.open('https://www.google.com', 'chatwindow', 'width=612,height=380,scrollbars=0');
}
function checkWin() {
if (!myWindow) {
openWin();
} else {
if (myWindow.closed) {
openWin();
} else {
alert('Chat is already opened.');
myWindow.focus();
}
}
}
</script>

Check if a popup window is already open before opening it using Jquery

I want to check if a popup window is already open , before I open the popup window.
How do I get it done using Jquery?
Below is my code to open a new popup window :
window.open("mystopchat.php?stat=1&session="+data['myid1']['session_id'][i],"win1","width=500,height=500");
Now before I call this, I want to be sure that this popup window is not already open.

This is a little trick I use, perhaps you could use it:
var winRef; //This holds the reference to your page, to see later it is open or not
function openWindow() {
var url = //Your URL;
if (typeof (winRef) == 'undefined' || winRef.closed) {
//create new, since none is open
winRef = window.open(url, "_blank");
}
else {
try {
winRef.document; //if this throws an exception then we have no access to the child window - probably domain change so we open a new window
}
catch (e) {
winRef = window.open(url, "_blank");
}
//IE doesn't allow focus, so I close it and open a new one
if (navigator.appName == 'Microsoft Internet Explorer') {
winRef.close();
winRef = window.open(url, "_blank");
}
else {
//give it focus for a better user experience
winRef.focus();
}
}
}
Hope it helps.

var popup;
function openPopupOneAtATime() {
if (popup && !popup.closed) {
popup.focus();
/* or do something else, e.g. close the popup or alert a warning */
}
else {
popup = window.open(...);
}
}

var newWindow = null;
function openwindow()
{
// open the new window only if newWindow is null (not opened yet)
// or if it was closed
if ((newWindow == null) || (newWindow.closed))
newWindow = window.open(...);
}

Here is my suggestion:
function authorize(callback) {
if(!document.authorize) {
console.log('Opening authorization window...');
document.authorize = window.open('popup.html','tw','width=300,height=200');
}
if(document.authorize.closed) {
console.log('Authorization window was closed...');
setTimeout(callback,0);
} else {
setTimeout(function(){
console.log('Authorization window still open...');
authorize(callback);
},1000);
}
return false;
}
function test() {
authorize(function(){
alert('teste');
});
}

try this (you will know if the open window was called):
var isOpen = "false";
function OpenPopup()
{
if(isOpen == "false")
{
isOpen = "true";
window.open("mystopchat.php?stat=1&session="+data['myid1']['session_id'] [i],"win1","width=500,height=500");
}
}

PopUp Blocker code detection not working

I have turned on PopUp blocker in FF and Chrome.
I have a piece of code to check PopUp is working as:
function checkPopUp()
{
var myTest = window.open("about:blank","","directories=no,height=1,width=1,menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no,top=0,location=no");
var popUpsBlocked = '';
if (!myTest) {
popUpsBlocked = true;
} else {
popUpsBlocked = false;
}
return popUpsBlocked;
}
its working fine "onload" of the page.
But when i am using it with hyper link onclick, its not working a popup is getting opened.
<a onclick="checkPopUp()" href="#">Test</a>

Browsers allow popups during "click" event loops. Different browsers have different configuration options under user control, but generally the default behavior is that a "click" is treated as a user willingly requesting functionality from a page.

The below code has been tested in FF29.0, IE9, Chrome35.0, Safari and the best part is it is working!!!
var popupBlocker = {
isPopupBlocked: function (width, height) {
setTimeout(function () {
var popup = window.open("");
if (!popup) {
return false;
}
else {
popup.document.open();
popup.document.write("<html><body onload='window.close();'></body></html>")
popup.document.close();
return true;
}
}, 100);
}
};
popupBlocker.isPopupBlocked();