JavaScript - Child Window Close Event
Hi all,
I have a HTML and I am opening another link in a separate window using window.open() . The child window is something like 'http://yahoo.com' which is out side html. I need to refresh the parent window when the child window is closed. any idea? Thanks, Mahesh Similar TutorialsHi, I have parent page with 10 child window and i want to close all child window when click on close session button on parent but first i need to check whether any child window open or not after that action should be done for close the child window. I want to capture Window close event. UnLoad will not help me as this event will be called whenever it is redirected to other page. I want as soon as user try to close the window i want to display an confirm message if user Click Ok then browser will be closed and if cancel it will not. Can anybody help me out on this. Dhiru Hi, Which javascript event should be used to call logout on window close and url change. I want to call logout function on window close and URL change on my application. I am calling logout functionon on <body onunload="doLogout();">, but onunload event is also called when refreshing the page. is there any specific event for Windoe close and URL change. can anyone resolve this issue. Regrads, Abha Hello, I'm working on a quote generator and I'm running into an issue with onChange events not firing when a text field is dynamically populated via a child window. Here's my setup: I have 3 text boxes (quantity, price, markup) that are multiplied together in order to give the total of that product. Each text box has an onChange event [called calculator()] that calls an external javascript file, which handles the multiplication and instantly updates the total of that product. Up to this point, everything works fine - - when I manually edit any of the 3 inputs, the total updates correctly. However, my problem is that I now have the "price" text box being dynamically populated, and when it updates it is not firing the onChange event attached to it. The text box is being filled by way of launching a child window and running the following code within it: Code: function call_submit() { opener.document.quote_form.item_price_1.value=document.child.prods.options[document.child.prods.selectedIndex].id self.close(); } I've also tried to call the calculator function from within the child window, with no luck: Code: function call_submit() { opener.document.estimator_form.item_price_1.value=document.child.prods.options[document.child.prods.selectedIndex].id calculator () self.close(); } So, as of right now, the following is happening - - I launch the child window, I select the product to add to the quote, the child window closes and the price is correctly populates within the "price" text box, BUT the total stays at zero. If I manually edit any of the fields, it then catches back up and properly updates the total. Is their any way to fire the onChange event at the time when the text field is populated from the child window? Any help would be appreciated. Thanks in advance. Hi! I'm new to this, so please bare with me. My terminology may not be up to par. Here's the deal: - I have a button on my Flash site that opens an HTML page in a popup window. In Flash, I open the new window using Actiosnscript 2.0: Code: on (release) { getURL("example1.html", "_blank"); } - Within the popup window are links to other HTML pages. They all open in the same window. I've been using the following to create the links in Dreamweaver: Code: onClick="MM_goToURL('parent','example2.html')" - On each page, I have a "Return to Main Menu" button that should close the popup window. To do this, I have been using: Code: onClick="window.close()" - The problem is that it works differently in each browser, and I can't even get it to consistently close the window in most browsers: Internet Explorer = popup message appears, asking "Are you sure you want to close this window?" or something similar; window closes after clicking "Yes." Safari = Only closes if I'm on the original HTML page. If I click on any of the other links (note that these all open in the same window), those pages' "Return to Main Menu" buttons cease to work. However, if I keep clicking "Back" until I get to the original page, it closes. Opera = Button actually works for each page. Firefox & Chrome = Does not close the window at all. I looked into it and saw that others have used a window.opener to solve similar issues. But, since my popup window is opened using Flash/AS2, I need to find a way around it. I've tried preceding "window.close()" with "window.opener=null" (i.e. - onClick="window.opener=null; window.close()"), but I don't think I'm doing it right because it still doesn't work. I've also seen others use codes that involve functions and variables, but it is beyond my current coding knowledge to implement this. Like I said, I'm sort of new at this. Any advice would be greatly appreciated. Thank you. - PW i have this code i need to close the parent.html window when the child window opened, i need the code for that working well in IE and Firefox Parent.html <HTML> <SCRIPT TYPE="text/javascript"> function sendTo() { window.open('child.html','_blank','resizable=yes,width='+(screen.width-500)+',height='+(screen.height-500)+''); } </SCRIPT> <BODY > <form name="form"> <input type="text" value="" name="text1" id="pdetails1"> <input type="text" value="" name="text1" id="pdetails2"> </br> <input type="submit" value="submit" onClick="sendTo()"> </BODY> </HTML> child.html <html> <body> <form> <input type=text name="text5" value=""> <input type=submit name="submit"value="submit"> </form> </body> </html> hi, In my pop up window is a form, at the moment I am validation the formfield but I also would like to close the window and refresh the main window when the form is submitted?! I found this piece of code: Code: onsubmit="window.opener.window.location.reload(true); window.self.close() not sure where to put it as validate form is onsubmit?! here is my code: Code: <html> <head> <title>Add Qualification</title> <script type="text/javascript"> function validateForm() { var qualification=document.forms["qualiform"]["qualification"].value if (qualification==null || qualification=="") { alert("Please enter a qualification name!"); return false; } } </script> </head> <body> <form action="<?php echo $PHP_SELF;?>" name="qualiform" method="post" onsubmit="return validateForm();"> <table> <tr> <td>Qualification Name:</td> <td><input type="text" name="qualification" /></td> </tr> <tr> <td> </td> <td><input type="submit" value="Add qualification" /></td> </tr> </table> </form> </body> </html> Hi All, I need to show/focus the parent window which is in back when click a link from child window in Chrome.This problem is in Chrome browser only. We have used the below code self.blur(); Window.opener.focus(); But this is not working in Google Chrome. Please suggest me some workaround to achieve this. Thanks in Advance Reply With Quote 12-19-2014, 09:26 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Window is not defined. window is. JavaScript (and the DOM) is case sensitive. You must pay attention to upper/lower case spelling, carefully. By the way, you shouldn't need the blur() call. If you focus on some window (any window) then any other focus should be lost. After following the instructions from the answer below: http://bytes.com/topic/javascript/an...arent-document I was able to have the child window perform the function defined in the parent window. The function was to only have an alert window pop up as the child page was loading. I easily modified this to my intention which was to have a parent function performed when the child window was clicked. Using the body tag: Code: <body onclick="parent.FUNCTION NAME HERE()"> I first change the method in which the function would be triggered, all went well there. then I tried to change which function would be triggered. (Basically use the function I wanted to happen on click of the child window rather then the function from the test). Once I did this switch, nothing happens. The site this is being used on is: http://tylerpanesar.ca/ What I want is when the menu bar is open in the parent window, the user chooses a link and the menu closes and goes to that link in the child window. This already works. However if the user opens the menu bar and then changes there mind and continues with the page the are currently on (clicks any content in the child window), the menu stays open. Currently the menu "hides" only when you choose one of the menu items, but it does not "hide" when you CLICK on child document. If you could figure out how to get it to "hide" on a "mouse out" that would be the better option. I attempted this method however i could only get it to "toggle" the menu on "mouse out". This method does however create an annoying flicker when you hover over the menu items (as it is toggling the open menu command I guess). If I had it "hide" the menu on "mouse out" it would "hide" as soon as you moved off of the main button. The viewer doesn't even have a chance to click a link. or at least that is what happens when I did it. You may have a better method to achieve this. The script that tells it to hide on click is within a jQuery function: Code: menua .click( function(){ menu.hide(); the code I used for the mouseout toggle was: Code: menu .mouseout( function(){ menu.toggle(); Here is the script that I am currently using for the menu to open and the "click" hide feature. This menu feature comes from the following help: http://www.bennadel.com/blog/1740-Bu...-FaceBook-.htm Code: <script type="text/javascript"> jQuery(function( $ ){ var menuRoot = $( "#menu-root" ); var menu = $( "#menu" ); var menua = $( "#menu a" ); // Hook up menu root click event. menuRoot .attr( "href", "javascript:void( 0 )" ) .click( function(){ // Toggle the menu display. menu.toggle(); // Blur the link to remove focus. menuRoot.blur(); // Cancel event (and its bubbling). return( false ); } ) ; menua .click( function(){ // Toggle the menu display. menu.hide(); } ) ; // Hook up a click handler on the document so that // we can hide the menu if it is not the target of // the mouse click. $( document ).click( function( event ){ // Check to see if this came from the menu. if ( menu.is( ":visible" ) && !$( event.target ).closest( "#menu" ).size() ){ // The click came outside the menu, so // close the menu. menu.hide(); } } ); }); </script> I've tried adding the click to "hide" menu feature to the child document but there is now menu in that document for it to "hide". What I was trying to was have the child document execute a function from the parent document and have that function executed IN the parent document. I've tried the technique from the link in my very first post but I believe it only calls the function from the parent and executes it IN the child. Which does not work for me as the menu is not in the child. There should be a way to make the child execute a function FOR the parent. I apologize for this very wordy post, but I am extremely frustrated with this now as I have been trying to get this to work for a few weeks now. Any help would be greatly appreciated. Thanks in advance, Tyler I have created and opened a child window called "checkwin" and have written some data to it. If the data is valid, I want the user to click on the 'CONFIRM' button on the child window, at which time I want the "submit()" function for the form on the parent window to be executed. If the data is invalid the user clicks on 'MODIFY' and I want focus to return to a field on the parent form. However, when I click on the "CONFIRM" or "MODIFY" buttons on the child window, nothing happens. Here is the code: Code: checkwin.document.write("</td></tr><tr><td align='right'><input type='button' value='CONFIRM' onclick='opener.document.personnel_form.submit()'></td><td></td><td><input type='button' value='MODIFY' onclick='opener.document.personnel_form.first_name.focus()'></td></tr></table>") Hi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) I am using a window.open to trigger a mailto: command. I don't want the window to stay open so I try to close it right after. The default email client launches correctly, but the window stays open and I get the following Javascript error: Unable to get value of the property 'close': object is null or undefined Code: Code: var win = window.open(mailto_link,'emailWindow'); win.close(); I am trying to pop up a window and then do stuff(set flags) when the content of the new window is done loading. For this I am trying to detect the window.onload of the pop-up child window but so far I am unsuccessful. I believe my problem is that the URL of child window is on different domain, than the one of the opener(parent) so that the window.onload is not being called. Thought this may change, at the moment I do not have access to the code for the page I'm opening up in the pop-up. Im pretty new to web development. Any help is appreciated. Heres my js code Code: //globals var popupHandle = null; var openingWindow = false; function popWindow(URL){ var windowId="sameid"; if (openingWindow == true) { alert("Please wait, content is still loading") return; } if ((popupHandle == null || popupHandle.closed)){ //is first time run or window was closed openingWindow = true; popupHandle = window.open(URL, '" + windowId + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=900,height=500'); popupHandle.onload = function(){ //this is the code that never executes even if I all I put in here is simple alerting openingWindow = false; windowHandle.focus(); }; } else{// window still exists, reset attributes if (popupHandle != null) { popupHandle.location.href = URL; popupHandle.focus(); } } } Note: The whole reason why I am doing this is because if its the first time I am clicking on the button that will open this pop up window and I click it repeatedly very quickly, a new pop up is opened for each time I clicked eventhough the window.open is supposed to reuse the window if it has the same windowId. The first call to window.open takes long enough to not have a window handle ready and this allows other clicks to get through. Hi, I am creating a new child air window called "test.html" as follow. How can I call a javascript function in parent window from child window? function createMyWindow() { var options = new air.NativeWindowInitOptions(); options.type = air.NativeWindowType.LIGHTWEIGHT; options.systemChrome = air.NativeWindowSystemChrome.NONE; options.transparent = true; mywindow = air.HTMLLoader.createRootWindow(false, options, false); mywindow.load(new air.URLRequest("test.html")); .... } Thanks, ASM For a parent window opened a child window, how can the parnet window be notified when the child window is closed or terminated? Thank you. function doUnload() { if (window.event.clientX < 0 && window.event.clientY < 0) { alert("Window is closing..."); } } i get window.event undefined by using var evt =window.event? event : e i get e undefuned var evt =window.event? event : e if (evt.clientX < 0 && evt.clientY < 0) { alert(evt.clientX +"Window is closing..."); } Hello all, and thank you for your coments, I want to preserve a 16/9 aspect ratio to the window after any resize, making the width a function of the height. As I have a window.resizeTo() inside the window.onresize event function, the infinite loop is served. How may I quit it? Code: <html><head><title>Title</title><script languaje="javascript"> const c_ra=16/9; window.onresize = function WindowReSize() { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE // myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' // myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } myWidth = Math.floor(myHeight*c_ra); window.resizeTo(myWidth,myHeight); // ** CAUTION resize event in a onresize event handler ! }; </script></head><body><p>Hello World</p></body></html> -------------------------------------------------------------------------------- I am currently using onbeforeunload to show user a message 'click ok to save, cancel to continue' Question.. On browser close event (user clicks on window close button 'X' on browser), I do not want to show the message to user. Can you please help with how to check the browser close event. Other details.. If user closes the browser, my ajax request is not getting executed and hence I am not able to save the data to database. Hence I am planning not to show the popup when user closes the browser. Thanks in advance... Sandip Hi... Is there anyway to differentiate between refreshing a window and closing the browser. It seems both events are handled by onUnload event. Thanks +++++++++++++++++++++++++++first window+++++++++++++++++++++++++ <html> <head> <script language="javascript"> var myWindow; function christDoes(){ mydWindow=open("second.html", "yes"); } </script> </head> <body><form name="myform" method=POST ACTION="sake.html" ><CENTER> <B>ENTER YOUR SUBJECT</B><INPUT TYPE="TEXT" NAME="subject"> <input type="button" name="ok" value="OK" onClick="christDoes()"> </form> </body> </html> +++++++++++++++++++++++++++parent window+++++++++++++++++++++++++ ++++++++++++++++++++++++++++child window++++++++++++++++++++++ <html> <head> <script language="javascript"> function me(){ displayColor(); } function displayColor() { callWindow=window.open("third.html","fine"); } var m=0; var fSubject = self.opener.document.forms[0].subject.value; if(fSubject.length>0){ if(isNaN(fSubject)){fSubject="";} else{opener.alert("Please enter figure");} numSub=parseInt(fSubject); if(numSub==2){var strSub="ab";} self.document.write("<center>" +"ENTER SUBJECT HERE" +"</center><br>"); var mercy="<HTML><BODY>" mercy +="<FORM ACTION='save.html' METHOD='POST'>" mercy +="<CENTER>" sub=new Array(strSub.length); for(var i=0; i<sub.length; i++){ m++; mercy +=m +"<input type='text' name='sub[i].toLowerCase()'>" +"<BR>"; opener.alert("You have entered" +m +"subjects"); } } mercy +="</CENTER></FORM></BODY></HTML><BR></BR>"; self.document.write(mercy +"<BR>"); self.document.bgColor="pink"; self.document.write("<center>" +"<input type='button' name='submit' value='SUBMIT'>" +"<center>"); } </script> </head> <body onload='me()'> </body> </html> ++++++++++++++++++++++++++++++child window++++++++++++++++++++ +++++++++++++++++++++++++++++++new window+++++++++++++++++++++ <html> <head> <script language="javascript"> function help(){ self.document.write("this is me") self.document.write("<center>" +"<input type='button' name='submit' value='SUBMIT'>" +"<center>"); } </script> </head> <body onLoad="help"> </body> </html> +++++++++++++++++++++++++++++++new window+++++++++++++++++++++ Can somebody help me with the code to make this button work? In the parent window when 2 is input in the textbox and 'OK' button clicked, the second window opens with 2 textbox and 'SUBMIT' button. If 'SUBMIT' button is clicked in the child window i want it to open the new window. Please help me out. Thanks. God bless in Jesus name. |