Javascript SetInterval Not Working in IE - javascript

I am using window.open to open a popup window and setinterval function to wait and refresh the background page, once the popup is closed.
the code is working fine in Chrome and Firefox but is not working in IE.
Basically the issue is: in IE, it doesn't wait until popup window is closed. It immediately gets refreshed as soon as the popup opens up.
I saw the issue coming in both IE 9 & IE 11.
Any solution for this?
This is the code:
var url = "/apex/VFP_Add";
var win = window.open(url, "Add" ,"width=600, height=300, scrollbars=yes");
win.moveTo(500, 100);
win.focus();
var timer = setInterval(function() {
if(win.closed) {
clearInterval(timer);
window.location.reload();
}
}, 500);
I put alerts just before if(win.closed) check and just after the check. For the first alert, it showed as False. In second alert, after "if check", it showed True. This is very weird because i had not closed the window.

It seems that's a known bug in IE. See this article about it: https://support.microsoft.com/en-us/kb/241109
Their solution is to basically negate the value of win.closed when you detect that it's running in IE. Something like:
if(win.closed || isRunningInIE()) {
clearInterval(timer);
window.location.reload();
}
There are different ways to detect IE, so you can just use your favorite method in place of that isRunningInIE() function.

Related

window.onbeforeunload listener not triggering on tab close in Firefox

The Problem
I have a function that should run on window.onbeforeunload. In Chrome, this works correctly and runs whenever a tab or window is closed or refreshed. In Firefox, however, it only runs on refresh, not close.
The Code
Here is an example:
var onStorageUpdate = function(){
var lastUnloaded = localStorage.getItem("LastUnloaded");
if(lastUnloaded === null){
$("div").text("Never stored");
}
else{
$("div").text(lastUnloaded);
}
};
onStorageUpdate();
window.addEventListener("beforeunload", function(){
var now = Date.now();
localStorage.setItem("LastUnloaded", now);
});
window.addEventListener("storage", function(){
onStorageUpdate();
});
Here is the order of events that should work in the above code:
On initial page load, attempt to get LastUnloaded from localStorage. If nothing is retrieved, show "Never Stored", otherwise show the value that was stored (should be a long integer timestamp)
Upon unloading a tab, updated LastUnloaded with the current timestamp. This is the part that doesn't seem to work in Firefox when closing a window.
Upon change in localStorage, update the DOM to show the timestamp
Demo
Here is a codepen of the example: http://codepen.io/jakelauer/full/NqRyqQ/
In order to test it, open the link in two different windows or tabs. You should notice that when you refresh either tab, both tabs update to show the same timestamp. In Chrome, you will notice that if you close one tab, the other tab will update its timestamp. In Firefox, you will notice that the timestamp does not get updated.
Any ideas? Thanks in advance!
I ended up just using onunload, which worked fine everywhere.

Safari print issue with javascript window.print()

I am having an issue with print on Safari. My System is Windows 7, and this function works fine in all other browsers except Safari. Here is the situation:
window.onload = function(){
console.log('before print');
window.print();
}
It won't output the log in console panel, but the print page will appear first, after i choose cancel in print page, the log will be output.
Does any body came up with this issue? Any help will be appreciated.
Updated
Here is the situation i have:
We need to print a page whose content can be changed by user by checking and unchecking check box, and only the content part of this page should be printed, so we create a new page that only contains the content for printing. In this page, we need to hide the unnecessary content that is not selected by user, so we need to do some DOM operation before window.print() get called. The console.log() is just an example code for observing. I tried to add an <div id='test'>Test HTML</div> in test HTML and add
var test = document.getElementById('test');
test.style.background = 'yellow';
before window.print();, it shows the same result in my Safari browser, the 'Test HTML' will not turn to yellow until i click cancel button in print panel, so it's not just the console.log issue.
Updated
I am using Safari 5.1.7(7534.57.2) on Windows 7
For me, the setTimeout solution didn't work. I found this jQuery plugin https://github.com/jasonday/printThis that has plenty of workarounds for window.print() because it seems not to be fully supported by all browsers.
I took this line that worked for me Safari document.execCommand("print", false, null)
and this worked ok for me for now in safari and chrome
try {
document.execCommand('print', false, null);
}
catch(e) {
window.print();
}
This is odd behavior. I tested in Safari 6.1 on Mac.
But may I ask why you need to log something before the printing? Because it seems that all the functions are being executed before the printing panel pops up:
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
window.onload = function() {
$('body').html('before print');
console.log('before print');
window.print();
};
</script>
When you look at the print preview, the page will have the text "before print" on it. For some reason, the console will log the text only when the print panel closes, but in my opinion that doesn't really matter for your visitors. You can manipulate DOM and change the page before the printing process as you like.
After several times trying, below code works, but i don't know the reason, can anybody explain? Or this is a Safari Bug?
window.onload = function() {
$('body').html('After change');
setTimeout(window.print, 1000);
};
Safari prints the page before it is loaded unlike other browsers. Hence window.onload() can be used in the code of the newly opened html page. But if the page opened is non html content, then it is not possible. The below solution is global across browsers and type of content open.
var printWindow = window.open(url, '_blank');
$(printWindow).load(function()
{
this.print();
});
Adding one more solution which worked for my case:
First make your popup window.
$( ".myButton" ).click(function() {
var url = 'www.google.com';
var printWindow = window.open( url, '_blank');
printWindow.focus();
});
Then, inside the HTML page which is loaded in the popup:
$(window).bind("load", function() {
setTimeout( function () {
try {
document.execCommand('print', false, null);
}
catch(e) {
window.print();
}
}, 500);
});

Using onafterprint in Chrome & Safari

I am aware that until recently onafterprint was only native to IE. Recently HTML5 has added it to its list of events. I have only been successful in using it in Firefox but cannot get it to function in Chrome or Safari.
It appears to only function in Firefox when its used in the body:
<body onafterprint="printIt()">
The script for the function is this:
$(document).ready(function() {
$('.printMe').click(function() {
window.print();
return false;
});
});
function printIt()
{
$('#confirmPrint').show();
};
By clicking the .printMe button, it opens the print window. Clicking print or cancel will show a message in #confirmPrint. I'm not so worried about being able to tell whether they are clicking cancel or print. I am only concerned with it functioning in Chrome and Safari. Any help is much appreciated. I am using jQuery as well, if that is not already obvious.
After some experiments, I think I can safely say that onafterprint is not worth considering.
Firefox fires it even if the user clicked Cancel instead of OK in the print dialog
IE8 apparently fires it even before the print dialog appears
Chrome doesn't fire it at all
Instead, just do whatever you wanted to do directly after calling print(), i.e.
$(document).ready(function() {
$('.printMe').click(function() {
window.print();
printIt();
return false;
});
});
function printIt()
{
$('#confirmPrint').show();
};

Window.onbeforeprint and Window.onafterprint get fired at the same time

I have defined onbeforeprint and I modify my html code and now once I finish printing that is on select of print button I want the onafterprint to be fired but it does not.
Instead when I press the Control + Print button the onbeforeprint is fired first and then the onafterprint event and then print dialog is shown.
Is there any way I could in some way do changes to my html after the Print button is clicked?
Am using IE -9 browser and the code is as follows:
Code
<script type="text/javascript">
window.onbeforeprint = function () {
alert('Hello');
}
window.onafterprint = function () {
alert('Bye');
}
</script>
onbeforeprint fired before dialog appears and allows one to change html and so on.
onafterprint is fired just before dialog appears. It is not even possible to know, whether document was actually printed or user canceled it. Needless to say about when printing finished (if started at all).
Again: no event is available to track anything happened in print dialog, i.e. answer to your question is no.
Moreover, I hope what your need will never be implemented, cause this allows to frustrate user. He/she asks to print one document, but got something different.
I ran into this same issue trying to use the onafterprint event, even in modern browsers.
Based on one of the other answers here, I was able to come up with this solution. It let's me close the window after the print dialog is closed:
// When the new window opens, immediately launch a print command,
// then queue up a window close action that will hang while the print dialog is still open.
// So far works in every browser tested(2020-09-22): IE/Chrome/Edge/Firefox
window.print();
setTimeout(function () {
window.close(); // Replace this line with your own 'afterprint' logic.
}, 2000);
Yes, you can, no catch. I have thus implemented in a professional application.
Print in Explorer, Firefox, all
window.onload = PrintMe;
function PrintMe() {
window.print();
setTimeout(function () {
alert("OK");
// Here you code, for example __doPostBack('ReturnPrint', '');
}, 2000);
}

Javascript popup - Works in FF & Chrome, fails in IE

I can't seem to figure out why the following simple popup will not work in IE9. FF & Chrome popup as expected, but IE does not appear to do anything when the link is clicked. I tried the IE9 debugger, but didn't get any helpful information out of it.
In the head section:
<script type="text/javascript" language="JavaScript">
function JSPopup(linkref) {
window.open(linkref,"Report Definitions","width=600,height=480");
return false;
}
In the body:
<strong>Report Definitions</strong>
Thanks for your help,
Filip
Turns out the problem was the name given to the popup - IE doesn't allow spaces, FF & Chrome do:
window.open(linkref,"Report Definitions","width=600,height=480");
needed to be changed to:
window.open(linkref,"ReportDefinitions","width=600,height=480");
This works across browsers.
Filip
This is part of the security changes made in IE6. Now you can only call "window.open" from within a user-initiated event. For example, your code would work inside an element's onclick event. The "window.open" http://msdn.microsoft.com/en-us/library/ms536651(VS.85).aspx MSDN page says this:
"This method must use a user-initiated action, such as clicking on a link or tabbing to a link and pressing enter, to open a pop-up window. The Pop-up Blocker feature in Internet Explorer 6 blocks windows that are opened without being initiated by the user."
Example...
function popUpWin(url,wtitle,wprop){
if (!window.open){ return; } // checking if we can't do this basic function
// Kill if(win), since win was a local var this was a usless check
var win = window.open(url,wtitle,wprop);
// next line important in case you open multiple with the same 'wtitle'
// to make sure the window is reused and refocused.
if (win && win.focus){ win.focus(); }
return false;
}

Categories