11

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.

Andrew Fox
  • 794
  • 4
  • 13
  • 30
  • 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 '12 at 04:59
  • 3
    How about using a [popup div](http://jqueryui.com/dialog/#default) instead of opening a new window? – 3dgoo Dec 20 '12 at 05:02
  • 1
    This is the best you can do with windows: http://jsfiddle.net/DerekL/WFsyY/ – Derek 朕會功夫 Dec 20 '12 at 05: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 Dec 20 '12 at 05:07
  • @AndrewFox - A popup div is just like a regular HTML div element. It can contain anything you want. – Derek 朕會功夫 Dec 20 '12 at 05:09
  • @3dgoo please add your answer as a solution so I can accept it, I'm reading through the docs on it right now and if Derek is right, this will be the best answer. Thanks! – Andrew Fox Dec 20 '12 at 05:15

6 Answers6

4

this popup layer is also good: DOMWindowDemo.

jikey
  • 394
  • 3
  • 9
  • 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. – Andrew Fox Dec 20 '12 at 05:13
4

How about using a popup div instead of opening a new window?

3dgoo
  • 15,716
  • 6
  • 46
  • 58
0

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>
Manish Nagar
  • 1,038
  • 7
  • 12
  • This doesn't seem to work as I was expecting, when I click back onto the parent window, the child window is lost. – Andrew Fox Dec 20 '12 at 05: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. – Manish Nagar Dec 20 '12 at 05:21
0
<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>
Hemant
  • 1
  • 1
  • 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. – Andrew Fox Dec 20 '12 at 05:22
0

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.

John Page
  • 357
  • 3
  • 5
  • 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. – John Page Dec 21 '13 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. – John Page Dec 21 '13 at 15:57
-1
<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>
Hemant
  • 1
  • 1
  • 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." – Andrew Fox Dec 20 '12 at 05:30