I am using window.open
to open a child window from the parent window. I want the child window to stay on top so the user can refer to it while making an entry in the parent window. Can this be done? I'm using Firefox at the moment, but it would be a bonus if it worked in all browsers.
-
You can focus at the new window, but then you won't be able to type or do anything in the parent window.– Derek 朕會功夫Dec 20, 2012 at 4:59
-
3How about using a popup div instead of opening a new window?– 3dgooDec 20, 2012 at 5:02
-
1This is the best you can do with windows: jsfiddle.net/DerekL/WFsyY– Derek 朕會功夫Dec 20, 2012 at 5:04
-
+1 for the popup div idea, that's very cool. My child window opens a php page and that page is pulling data from a mysql database. Will the popup div work for that, or can it only be text or static information?– Andrew FoxDec 20, 2012 at 5:07
-
@AndrewFox - A popup div is just like a regular HTML div element. It can contain anything you want.– Derek 朕會功夫Dec 20, 2012 at 5:09
6 Answers
this popup layer is also good: DOMWindowDemo.
-
I'm going to +1 this because I know it will come in handy someday, even though none of them are what I had in mind for this task. Dec 20, 2012 at 5:13
yes you can do this by this code you have give onBlur="self.focus()" in body for child window
//Parent page...
<html>
<body>
<a href="#" onClick="window.open('two.html','sdvwsv','width=200,height=200');">here...</a>
</body>
</html>
//Child page...
<html>
<body onBlur="self.focus();">
here...
</body>
</html>
-
This doesn't seem to work as I was expecting, when I click back onto the parent window, the child window is lost. Dec 20, 2012 at 5:18
-
here the problem is to write content from child to parent so its enough and when there is no parent then there is no child exist. Dec 20, 2012 at 5:21
<html>
<script language="JavaScript">
<!--
function openWin(){
var myBars = 'directories=no,location=no,menubar=no,status=no';
myBars += ',titlebar=no,toolbar=no';
var myOptions = 'scrollbars=no,width=400,height=200,resizeable=no,top=10, left=10,';
var myFeatures = myBars + ',' + myOptions;
var myReadme = 'This is a test.'
var newWin = open('', 'myDoc', myFeatures);
newWin.document.writeln('<form>');
newWin.document.writeln('<table>');
newWin.document.writeln('<tr valign=TOP><td>');
newWin.document.writeln('<textarea cols=45 rows=7 wrap=SOFT>');
newWin.document.writeln(myReadme + '</textarea>');
newWin.document.writeln('</td></tr>');
newWin.document.writeln('<tr><td>');
newWin.document.writeln('<input type=BUTTON value="Close"');
newWin.document.writeln(' onClick="window.close()">');
newWin.document.writeln('</td></tr>');
newWin.document.writeln('</table></form>');
newWin.document.close();
newWin.focus();
}
-->
</script>
<body>
<form>
<b>Click the following button to open a new window: </b>
<input type=BUTTON value="Open" onClick='openWin()'>
</form>
</body>
-
Thank you for the reply, but this isn't what I was going for. This creates a new window with a text box in it, but still gets lost when I click into the parent window. I want the child window to stay on top so the user can refer to it while making an entry in the parent window. Dec 20, 2012 at 5:22
I wrestled with this for a long time. It seems to be a bug in FF, but I noticed that after the new window opens, if I click on it, it does get focus and comes to the top. However calling window.focus() on it didn't work, so I guessed it was happening too early.
So in the new window code, at the bottom of the page I added
setTimeout(function(){window.focus()},100);
It does not feel like solid practice but if you need it to work... The 100mSec seems to be the lowest that works on my system.
-
Also, it seems it only works if the open() request is made from insaide an event handler. Further, the event handler has to be on an object that can itself accept focus, such as input elemnts etc. Dec 21, 2013 at 15:56
-
Even though you ca attach event ahndlers to things like divs, they cannot accept focus and so the above will not work on them. Dec 21, 2013 at 15:57
<html>
<script language="JavaScript">
<!--
function openWin(){
var myBars = 'directories=no,location=no,menubar=no,status=no';
myBars += ',titlebar=no,toolbar=no';
var myOptions = 'scrollbars=no,width=600,height=400,resizeable=no,top=10, left=10';
var myFeatures = myBars + ',' + myOptions;
var newWin = open('test.html', '', myFeatures);
newWin.document.close();
newWin.focus();
}
-->
</script>
<body>
<form>
<b>Click the following button to open a new window: </b>
<input type=BUTTON value="Open" onClick='openWin()'>
</form>
</body>
</html>
</html>
-
Thank you, but I'm not sure you understand what I want. "I want the child window to stay on top so the user can refer to it while making an entry in the parent window." Dec 20, 2012 at 5:30