Close child window on f5 refresh - javascript

I have a piece of code that launches another page in an external window.
var myOpenWindow = window.open(...);
I manage this window throughout the applications life cycle and once the forum is completed my managing state closes this window.
However, the issue I am facing is that if the user hits f5 for a hard refresh the window is still open after the main page loads.
At first I thought I could override the window.open to track the state of open windows from my app in a global variable. However, I overlooked the fact that on an f5 reset my global is lost.
This seems like a simple problem, but the solution has evaded me. Is there anyway to close a window opened by window.open when the parent is refreshed?

var myOpenWindow = window.open(...);
window.onunload = function(){myOpenWindow.close()};
or better
window.addEventListener('unload',function(){myOpenWindow.close()})
should do that.
MDN: WindowEventHandlers.onunload

Maybe you could use a DIV and place it in the center of the screen. Add some jQueryUI magic and you don't have to worry about popups or blockers or other stuff.

You can keep the window open, with the following code :
When you reload the parent page, the child will change the myOpenWindow when parent page will be loaded.
Parent window :
function detectChild(child) {
myOpenWindow = child;
//opener.actionWhenOpen();
}
var myOpenWindow = window.open(...);
window.onunload = function() {
if (myOpenWindow) {
myOpenWindow.refreshParent();
}
};
Child windows :
if (opener) {
//opener.actionWhenOpen();
opener.onunload = function() {
if (opener && opener.myOpenWindow) {
opener.myOpenWindow.refreshParent();
}
};
}
function refreshParent() {
this.i = ((this.i) ? this.i : 0)+1;
var i = this.i;
setTimeout(function() {
if (!opener) {
return console.log("Opener closed.");
} else if (opener.detectChild && !opener.myOpenWindow) {
this.i = 0;
opener.detectChild(window);
} else if (i < 900) {
console.log("Opener cheked("+i+").");
refreshParent(i++);
}
}, 50);
}

Related

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?

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>

Show message in parent page after closing popup child

I have this code in a child window (popup):
function confirmation() {
var answer = confirm("Close?")
if (answer) {
var popup = window.open('../index.php?accao=some');
popup.document.getElementById('boxid').style.visibility="visible";
} else {
return false;
}
}
And, in the parent page I have:
<div id="boxid" style="visibility: hidden">Success</div>
What I want is to show the #boxid when I click in the popup to close. Why doesn't this code work?
UPDATE: still not working.
var popup = window.parent;
popup.document.getElementById('boxid').style.visibility="visible";
You should use window.parent to refer to the parent page.
What you are doing will open a new window.

jquery/jscript Prevent open multiple popups

I open a popup with the click event of a hyperlink... The popup contains records from a server.
The problem is that when I click rapidly, there are multiple popups at once.
There is a way to prevent this? in which can open a single popup
My code:
$('.wrapper_form a.add').click(function(e)
{
e.preventDefault();
if(typeof(currentPopup) == 'undefined' || currentPopup.closed)
{
url = 'server_page.aspx';
currentPopup = window.open(url,'server','height=500,width=800');
if (window.focus) {currentPopup.focus()}
}
else
{
currentPopup.focus();
}
});
Here is one approach. Not the best solution but it should work. What this code will do is protect against clicking the link a bunch of times and have it open a new instance for each click. This code will not allow the window to be opened more than once in a 1/2 interval, of course you can change the timing.
var hopefullyThisIsNotInGlobalScope = false;
$('.wrapper_form a.add').click(function(e)
{
if (hopefullyThisIsNotInGlobalScope)
{
return false;
}
hopefullyThisIsNotInGlobalScope = true;
setTimeout(function () { hopefullyThisIsNotInGlobalScope = false; }, 500);
e.preventDefault();
if(typeof(currentPopup) == 'undefined' || currentPopup.closed)
{
url = 'server_page.aspx';
currentPopup = window.open(url,'server','height=500,width=800');
if (window.focus) {currentPopup.focus()}
}
else
{
currentPopup.focus();
}
});
Assuming the popup is on the same domain as the window launching it you might be able to replace hopefullyThisIsNotInGlobalScope variable with a global var attached to the window. You can then set that variable when the popup launches and alter it using the browser unload event

refresh child window from parent window

Using JavaScript
i have the refresh button in my parent window,
when i click refresh button ,
i want to refresh my child window ,
window.location.href='add_billing_order_frm.php?session_re_genrate=new
This snippet redirecting the page instead refresh ,
I thing there is a snippet like
opener.document.location.reload(true);
but this one for parent window refresh, but i want for child window wiht URL location option
function show_billing_order_form(url){
var childWindow = window.open(url);
}
function refresh_my_child_window(){
return childWindow.location.reload('add_billing_order_frm.php');
}
To open a popup window(child window) , i used this show_billing_order_form call back ,
To refresh the child window , i add one refresh icon in my parent window , To refresh the child window , in that refresh icon onclick i called refresh_my_child_window ,
but function refreshing my child window..
When opening your child window from the parent, remember the return value in a variable somewhere:
var childWindow = window.open(/* ... */);
...and when you want to refresh the child:
childWindow.location.reload();
Note that some browsers will prevent access to childWindow.location.reload if the parent and child aren't loaded from the same origin.
Here's a quick-and-dirty example (live copy — note: the live copy only works in non-edit mode, like the link given, because otherwise JSBin uses null.jsbin.com instead of output.jsbin.com and so the origin doesn't match):
HTML:
<input type='button' id='btnOpen' value='Open Child'>
<input type='button' id='btnClose' value='Close Child'>
<input type='button' id='btnRefresh' value='Refresh Child'>
JavaScript:
(function() {
var childWindow;
document.getElementById('btnOpen').onclick = openChildWindow;
document.getElementById('btnClose').onclick = closeChildWindow;
document.getElementById('btnRefresh').onclick = refreshChildWindow;
function openChildWindow() {
if (childWindow) {
alert("We already have one open.");
} else {
childWindow = window.open(location.protocol + "//" + location.host + "/cotokijigu/1");
}
}
function closeChildWindow() {
if (!childWindow) {
alert("There is no child window open.");
}
else {
childWindow.close();
childWindow = undefined;
}
}
function refreshChildWindow() {
if (!childWindow) {
alert("There is no child window open.");
} else {
childWindow.location.reload();
}
}
})();
Caveat: I would never recommend hooking up event handlers with onclick properties as above. Instead, I'd use addEventListener (on standards-based browsers) or attachEvent (on IE), by using a library or a utility function like this one. Used the properties above to avoid obscuring the main point.
var childWindow = window.open("","name",/* .. */);
childWindow.location.reload();

Categories