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.
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 朕會功夫 Commented Dec 20, 2012 at 4:59
- 3 How about using a popup div instead of opening a new window? – 3dgoo Commented Dec 20, 2012 at 5:02
- 1 This is the best you can do with windows: jsfiddle.net/DerekL/WFsyY – Derek 朕會功夫 Commented 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 Fox Commented Dec 20, 2012 at 5:07
- @AndrewFox - A popup div is just like a regular HTML div element. It can contain anything you want. – Derek 朕會功夫 Commented Dec 20, 2012 at 5:09
6 Answers
Reset to default 4How about using a popup div instead of opening a new window?
this popup layer is also good: DOMWindowDemo.
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>
<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>
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.
<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>