javascript - setTimeout not firing after window.open - javascript

I'm facing a weird problem with setTimeout function! i have two html page as following:
**Index.html: **
<script>
var url = 'http://127.0.0.1/s/s1.html';
var x ;
function closeTab() {
try {
console.log('trying...');
x.close();
console.log('closed!');
} catch (e) {
console.log('cannot close tab!', e);
}
};
x = window.open(url,'_blank');
setTimeout(closeTab, 3000);
</script>
and
s1.html :
<script>
alert(1);
</script>
The problem is after alert dialog showed in s1.html, the parent window (index.html) cannot close child tab via closeTab function, until user close the alert dialog! I want to (force) close it after 3000 milliseconds. even i searched for an alternative function for setTimeout but some solutions makes browser freezed.
any idea?
Thanks

Related

How to add a delay to onmousedown

I am trying to set a delay on the mousedown (click) which focuses the newWin.focus in code below:
So in short, the code below works fine. If the popup window is open, it re-focuses on it (bringing it back front) when the user clicks anywhere on the page.
I would like to have a 2 second delay when the user clicks on the page, THEN have it refocus on the new window.
I have spent hours trying to figure this out to no avail using various settimeout's here and there. So, I thought I would show what I have that works and hope someone might explain how my need can be accomplished.
PS: I am still learning my way around javascript and in NO WAY consider myself knowledgeable in the subject.
Thanks in advance!!
<script type="text/javascript">
var newWin;
function openPopup()
{
newWin=window.open('https://www.somesite/url.php','window','width=400,height=600,scrollbars=0,resizable=1,top=300,left=300');
document.onmousedown=focusPopup;
document.onkeyup=focusPopup;
document.onmousemove=focusPopup;
}
function focusPopup(){
if(!newWin.closed){
newWin.focus();
}
}
</script>
You can add a setTimeout to your mousedown handler:
document.onmousedown = () => setTimeout(focusPopup, 2000);
<script type="text/javascript">
var newWin;
function openPopup()
{
newWin=window.open('https://www.somesite/url.php','window','width=400,height=600,scrollbars=0,resizable=1,top=300,left=300');
document.onmousedown=()=>{
setTimeout(focusPopup,2000)
};
document.onkeyup=focusPopup;
document.onmousemove=focusPopup;
}
function focusPopup(){
if(!newWin.closed){
newWin.focus();
}
}
</script>
Just use setTimeout to add the delay.
The global setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires.
var newWin;
function openPopup() {
newWin = window.open('https://www.somesite/url.php', 'window', 'width=400,height=600,scrollbars=0,resizable=1,top=300,left=300');
document.onmousedown = function() {
setTimeout(focusPopup, 2000);
};
document.onkeyup = focusPopup;
document.onmousemove = focusPopup;
}
function focusPopup() {
if (!newWin.closed) {
newWin.focus();
}
}

change on the javascript function is not being reflected in the browser

I've difficult closing popup. window.close(); is working only with Chrome not IE. After doing some researches, I found this article which tells why I shouldn't use window.close() directly in the popup to close it.
//Global var to store a reference to the opened window
var openedWindow;
function openWindow() {
openedWindow = window.open('moreinfo.htm');
}
function closeOpenedWindow() {
openedWindow.close();
}
function myReload() {
location.reload();
}
The problem is that the first time I wrote the closeOpenWindow method, I forgot to put the () at the end, so it was openedWindow.close;
I've fixed the problem, but I'm still getting the same error on that line.
openedWindow.close is not a function
If I delete the the entire function closeOpenedWindow(), I get the error that closeOpenedWindow() is not a function. When I put it back, I get the previous error that openedWindow.close is not a function.
Thanks for helping
EDIT:
This is how I'm calling the function from the popupu:
function mycloseChild() {
window.opener.myReload();
window.opener.closeOpenedWindow();
}
var openedWindow = {
open: () => { window.open('moreinfo.htm') },
close: () => { window.close() }
}
Actually, this seems to work in Chrome Debugger. Maybe a timing issue?
//Global var to store a reference to the opened window
var openedWindow;
function openWindow() {
openedWindow = window.open('moreinfo.htm');
}
function closeOpenedWindow() {
openedWindow.close();
}
openWindow();
//openedWindow is new window
closeOpenedWindow();
//openedWindow closes
It looks like you can use window.opener from the openedWindow to get a reference to the original window object which has the method closeOpenedWindow. but in order for that to work, you need to add closeOpenedWindow to the original window like so
window['closeOpenedWindow'] = function() {
openedWindow.close();
}
and then call it from the opened window like so window.opener.closeOpenedWindow()
see also Can I pass a JavaScript variable to another browser window?

Sequencing two action on a button click

Problem: I have a asp.net button and on click of that I am displaying another window using window.open() at the client side using <script></script>
"I actually, need a popup (alert message) to be displayed on my parent page where my button is located once the user closes the child window."
Couple of things I tried are as follows:
I tried using setTimeOut() to have a time out for some milliseconds. This does not work as the control is not waiting until the time out is complete. It just proceeds to execute next set of code.
I tried using setInterval() but for some reason it is not working for me. Below is the code snippet of that:
$(document).ready(function () {
$('#<%=btnClick.ClientID%>').bind('click', function () {
var newWindow = window.open("http://www.google.com/", "google", 'resizable=1,width=900,height=800,scrollbars=1', '_blank');
newWindow.moveTo(0, 0);
var test = setInterval(function (e) {
if (newWindow.closed) {
alert("HEYY");
clearInterval(test);
__doPostBack("<%= btnClick.UniqueID %>", "");
}
else {
e.preventDefault();
}
}, 5000);
});
});
.
I also tried making an ajax call to open the new window and make it async : false, it again did not help me.
Bring your window and timer variable out of scope of the event handler. You need to do a polling i.e. periodically keep on checking if the windows has been closed. Using setInterval to do a polling will do the job.
var newWin, pollTimer;
$('#btnId').bind('click', function () {
newWin = window.open("...", "...", "");
pollTimer = window.setInterval(function() {
if (newWin.closed) {
window.clearInterval(pollTimer);
callCodeWhenPopupCloses();
}
}, 5000);
});
function callCodeWhenPopupCloses() {
alert("Popup closed.");
...
}

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>

Dojo addOnUnload function : How to include confirmation

I have some dojo code as below:
<script type="text/javascript">
dojo.require("dojo.io.script");
var unload = function refreshParent(){
confirmExit();
}
dojo.addOnUnload(window, "unload");
</script>
function confirmExit()
{
var r=confirm("Are you sure you want to close the window without saving it?");
if (r==true)
{
window.returnValue=true;
window.close();
}
else
{
return false;
}
}
The scenario is: On clicking on close for a window, the dojo unload gets called which closes the window.
However, I want a dialog box which asks for confirmation about the closing and if the user hits Cancel, the closing of the window should be disposed off.
However, currently, no matter what I do, the window is getting closed.
What could be the solution to this ?
You have to return the confirmExit value
var unload = function refreshParent(e){
return confirmExit();
}

Categories