如何让子窗口保持在顶部？答案

【问题标题】：How to make child window stay on top?如何让子窗口保持在顶部？
【发布时间】：2012-12-07 14:01:26
【问题描述】：

我正在使用window.open 从父窗口打开一个子窗口。我希望子窗口保持在顶部，以便用户在父窗口中进行输入时可以参考它。这可以做到吗？我目前正在使用 Firefox，但如果它适用于所有浏览器，那将是一个额外的好处。

【问题讨论】：

您可以专注于新窗口，但您将无法在父窗口中输入或执行任何操作。
使用popup div而不是打开一个新窗口怎么样？
这是你可以用 windows 做的最好的事情：jsfiddle.net/DerekL/WFsyY
+1 用于弹出 div 的想法，这非常酷。我的子窗口打开一个 php 页面，该页面正在从 mysql 数据库中提取数据。弹出 div 是否适用，还是只能是文本或静态信息？
@AndrewFox - 弹出 div 就像一个普通的 HTML div 元素。它可以包含您想要的任何内容。

【解决方案1】：

我为此苦苦挣扎了很长时间。这似乎是FF中的一个错误，但我注意到在新窗口打开后，如果我点击它，它确实会获得焦点并到达顶部。但是调用 window.focus() 没有用，所以我猜它发生得太早了。

所以在新窗口代码中，我在页面底部添加了

setTimeout(function(){window.focus()},100);

这感觉不像是扎实的练习，但如果你需要它来工作...... 100 毫秒似乎是在我的系统上运行的最低值。

【讨论】：

另外，它似乎只有在 open() 请求是从事件处理程序中发出时才有效。此外，事件处理程序必须位于本身可以接受焦点的对象上，例如输入元素等。
即使您可以将事件 ahndler 附加到 div 之类的东西上，它们也无法接受焦点，因此上述方法对它们不起作用。

【解决方案2】：

使用popup div而不是打开一个新窗口怎么样？

【讨论】：

这样做的问题是您不能将 HTML 弹出窗口移到父窗口之外。

【解决方案3】：

<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>

【讨论】：

谢谢，但我不确定你是否明白我想要什么。 “我希望子窗口保持在顶部，以便用户在父窗口中进行条目时可以参考它。”

【解决方案4】：

<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>

【讨论】：

感谢您的回复，但这不是我想要的。这将创建一个包含文本框的新窗口，但当我单击父窗口时仍然会丢失。我希望子窗口保持在顶部，以便用户在父窗口中进行条目时可以参考它。

【解决方案5】：

是的，您可以通过在正文中为子窗口提供 onBlur="self.focus()" 的代码来做到这一点

    //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>

【讨论】：

这似乎不像我预期的那样工作，当我点击返回父窗口时，子窗口丢失了。
这里的问题是将内容从子级写入父级，这样就足够了，当没有父级时，就没有子级存在。

【解决方案6】：

这个弹出层也不错：DOMWindowDemo.

【讨论】：

我要为此 +1，因为我知道它总有一天会派上用场，尽管这些都不是我为这项任务考虑的。