Question

我知道这不是一个好习惯：-)，但是我有一个请求要求打开一个“始终位于最上方”的新浏览器窗口。它是一个小的通知/统计窗口，而不是弹出的广告。

我尝试从主页打开一个新窗口：

<a href="okence.html"  
   onclick="window.open('okence.html', 'newwindow', 'width=400,height=320'); return false;"
>Click</a>

新的html文件具有：

<html>
    <body>
        <script type="text/javascript" language="javascript">
            onblur = function() {
                setTimeout('self.focus()', 100);
            }
        </script>

        Test
    </body>
</html>

新窗口将打开，但没有“始终位于最上方”。还有其他办法吗？也许浏览器不允许这样做？

我尝试了一些建议（也set the focus of a popup window every time），但都没有用。新的（小）窗口打开了，但是如果我在外面的某个地方单击，它就会消失。我想要一个经典的“始终在顶部”功能，使窗口保持在屏幕上。

Answer 1

你不能这样做。如果网站可以这样做，这是一个巨大的安全问题！欺诈网站可能会阻止访问者分散窗口的注意力。

想一想：

如果您的电子邮件程序每次收到新电子邮件时都会在您的脸上弹出一个弹出窗口怎么办？如果您不喜欢它，您将希望将其最小化或至少将其隐藏在其他窗口后面。问题是，如果你不能把它隐藏在另一个窗口后面怎么办？这会破坏用户体验。

相反，请尝试：

闪烁标题栏（就像收到新环聊消息时的 Gmail：标题栏从“Gmail - 收件箱”闪烁到“ 说...”）。像这样：

代码如下。确保在完成后停止运行代码段，方法是点击 Hide Results 以确保代码段停止通过闪烁标题来耗尽您的 RAM。

setInterval(function() {
  var title = document.getElementById('title');
  if (title.innerHTML === "Original Title") {
    title.innerHTML = "New Notification!";
  } else {
    title.innerHTML = "Original Title";
  }
},1000)

<p id="title">Original Title</p>
<small>Because Stack Snippets don't have &lt;title> support, I used a p element there. In real development, replace &lt;p> with &lt;title>.</small>

在图标上添加一个红点，这样用户在浏览标签栏时就可以看到通知。代码：

setInterval(function() {
  var flash = document.getElementById('flash');
  if (flash.src == "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVQ4Ed2RSw6AMAhEOYhLT+7p3HiGGjRTp0OxJrpyQeiH9yhqtqzlVaSwWTGOrFEQAOoBfqfnzUGvIAAiqYInMGRc+42AjegyymCOF2AzgvgezF8EPhtm4jllvU1zQVx/D0U3AkCaz+8HgedEoiDvrT4FIpeIiAFdR4GKSMgwGu91q05tY4o1SAAAAABJRU5ErkJggg==") {
    document.getElementById('flash').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdklEQVQ4Ed2RQQ6AMAgE+f8zfJ2/qME4zbqV1MSePDQU2FlKGrHt7dMp4YgWeqpBgwHQE5A9r98KT4IBMJNu8AbGTLVrDNSRKbMIc76AZAZpH+YvBrkbO+me1V21a76RSepMzaNr+gsQpsBF2SvrgB4BiN6/8gPOhlAtW0V8NgAAAABJRU5ErkJggg==";
  } else {
    flash.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVQ4Ed2RSw6AMAhEOYhLT+7p3HiGGjRTp0OxJrpyQeiH9yhqtqzlVaSwWTGOrFEQAOoBfqfnzUGvIAAiqYInMGRc+42AjegyymCOF2AzgvgezF8EPhtm4jllvU1zQVx/D0U3AkCaz+8HgedEoiDvrT4FIpeIiAFdR4GKSMgwGu91q05tY4o1SAAAAABJRU5ErkJggg==";
  }
},1000);

<small>Once again, stack snippets does not support favicons. In real development, change img to link.</small>
<img rel="icon" type="image/png"  id="flash" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVQ4Ed2RSw6AMAhEOYhLT+7p3HiGGjRTp0OxJrpyQeiH9yhqtqzlVaSwWTGOrFEQAOoBfqfnzUGvIAAiqYInMGRc+42AjegyymCOF2AzgvgezF8EPhtm4jllvU1zQVx/D0U3AkCaz+8HgedEoiDvrT4FIpeIiAFdR4GKSMgwGu91q05tY4o1SAAAAABJRU5ErkJggg==" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVQ4Ed2RSw6AMAhEOYhLT+7p3HiGGjRTp0OxJrpyQeiH9yhqtqzlVaSwWTGOrFEQAOoBfqfnzUGvIAAiqYInMGRc+42AjegyymCOF2AzgvgezF8EPhtm4jllvU1zQVx/D0U3AkCaz+8HgedEoiDvrT4FIpeIiAFdR4GKSMgwGu91q05tY4o1SAAAAABJRU5ErkJggg==" />

避免什么：

在收到新通知时播放巨大的声音
试图强制用户激活（幸运的是，大多数浏览器都阻止了这一点）
最后，打开一个弹出窗口。

所以弹出窗口不是一个好主意。

使用“始终位于顶部”打开新的浏览器窗口

1 个答案: