禁用浏览器状态栏文本

Question

禁用浏览器状态栏文本

javascripthtmlcross-browserstatusbarsuppress

13

背景

现代浏览器取消了传统的状态栏，而是在窗口底部绘制一个小工具提示，在鼠标悬停/聚焦时显示链接目标。

以下截图展示了这种（在我的情况下）不受欢迎的行为：

问题

有一种通用方法可以禁用这些工具提示吗？
在我的特定情况下，我是否忽略了任何明显的缺点？
我的尝试（见下文）是实现这一点的合理方式吗？

推理

我正在开发一个内部网站应用程序，并希望针对某些特定应用程序操作禁用此行为，因为在某些情况下，“https://server/#” 看起来很丑陋，并且由于我的应用程序在该位置绘制自己的状态栏，因此会影响使用。

我的尝试

虽然我不是专业的 Web 开发人员，但我有一些 jQuery 的知识，以下是我的尝试：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Target Tooltip Test</title>
    <style>
      a, span.a {
        color: #F00;
        cursor: pointer;
        text-decoration: none;
      }

      a:hover, span.a:hover {
        color: #00F;
      }

      a:focus, span.a:focus {
        color: #00F;
        outline: 1px dotted;
      }
    </style>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
      $(document).ready(function() {
        patch();
      });

      function patch() {
        $('a').each(function() {
          var $this = $(this).prop('tabindex', 0);

          if($this.prop('href').indexOf('#') == -1 || $this.prop('rel').toLowerCase() == 'external') {
            return;
          }

          var $span = $('<span class="a" tabindex="0"></span>');

          $span.prop('data-href', $this.prop('href'));
          $span.text($this.text());

          $this.replaceWith($span);
        });

        $('a[rel="external"]').click(function() {
          window.open($(this).prop('data-href'));
          return false;
        });

        $('span.a').click(function() {
          location.href = $(this).prop('data-href');
        }).keypress(function(event) {
          if(event.keyCode == 13) {
            location.href = $(event.target).prop('data-href');
          }
        }).focus(function() {
          window.status = ''; // IE9 fix.
        });
      }
    </script>
  </head>
  <body>
    <ol>
      <li><a href="http://google.com" rel="external">External Link</a></li>
      <li><a href="#foo">Action Foo</a></li>
      <li><a href="#bar">Action Bar</a></li>
      <li><a href="#baz">Action Baz</a></li>
      <li><a href="mailto:support@example.org">Email Support</a></li>
    </ol>
  </body>
</html>

patch()会用一个元素替换包含#的所有链接（在本例中代表应用特定操作），将所有“外部”链接在新标签页或窗口中打开，并且似乎不会破坏自定义协议处理。

- TjB

https://dev59.com/RUfRa4cB1Zd3GeqP-qBl - j08691

5个回答

3

<button onclick="window.open('yoururlhere.html','_self')">your link text here</button>

请注意，这将把ctrl-click视为普通点击，并禁用右键单击。至于中键单击，我不确定。

你也可以使用"a"标签，仅将href替换为onclick，就像上面的代码一样，但是当我尝试时，我的"a:hover"样式停止工作了。显然，在Firefox中，没有href的"a"被认为是无法悬停的。因此，我切换到了“button”和“button:hover”样式，一切都很好。

我知道这种解决方案会被认为是不好的做法，但在某些情况下，例如我正在制作的网站主要由全屏照片组成，审美比原则更重要。

- tommie

1

工具提示为用户提供了一个指示，告诉他们如果点击链接将会带他们到哪里。它是标准浏览器用户体验的一部分，用户会期望在您的网站上看到它。因为您认为它不好看而改变这种期望可能会导致糟糕的用户体验。当用户停止悬停在链接标记上时，该区域显示的任何内容都将可见。

我知道，任何没有告诉我它要去哪里的链接看起来都很可疑。

- Bill

感谢您提供答案。我意识到99%的情况下这不是一个好主意，但在我的情况下，大多数链接都是看起来像按钮和其他窗口UI元素的操作。我的应用程序应该像桌面应用程序一样在浏览器中运行。我认为在这种情况下，仅出于美观原因禁用工具提示对于那些元素是可以接受的。外部链接和自定义协议保持不变。 - TjB

这其实并不总是一个好主意，这就是为什么浏览器已经停止让人们随意更改状态栏内容了。你为什么不把它保持原样，看看是否有人会抱怨呢？ - Bill

这不仅仅是一个美学问题。看一下j08691提供的链接中的截图：http://i.imgur.com/mlnYN.png 工具提示框挡住了网站内容。对于实现自己状态栏的Web应用程序，禁用它以进行特定于应用程序的操作是合理的原因。同样，外部链接保持不变。 - TjB

这是你的应用程序，所以显然你可以做出你认为最好的选择。一般来说，破坏网页工作方式的行为对于网站并不受欢迎。以你提供的例子来看，用户只需将鼠标移动几个像素，所有内容就会再次可见。你的网站信息并没有被永久地隐藏。 - Bill

1

人们似乎忘记了浏览器是一个良好的低成本平台，可以用来交付内部企业应用程序，因此禁用状态工具提示不会“100％破坏网络”。例如，我的应用程序的目标受众约为25人。状态工具提示很丑，我的用户不关心链接指向何处，因为该页面不像“传统网页”那样设计。这不仅仅是链接文本，还包括我想要摆脱的页面加载状态。我认为让它无法禁用是愚蠢的。什么时候去除选择是一个好主意呢？ - Jamie Carl

1

这是我使用jQuery做的事情：

        //remove status bar notification...
        $('a[href]').each(function(){
            u = $(this).attr('href');
            $(this).removeAttr('href').data('href',u).click(function(){
                self.location.href=$(this).data('href');
            });
        });

- Daantje

不，示例仅为普通鼠标单击。将click（）更改为mousedown（），以捕获所有鼠标按钮。我认为。未经测试...这可能有所帮助；https://dev59.com/GHM_5IYBdhLWcg3w1G-N#2725963 - Daantje

1

试一下

$(this).removeAttr("href");  
$(this).click(function(){}).mouseover(function(){.........}).etc

- user1234396

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dagg Nabbit · Accepted Answer

有没有一种便携的方法来禁用这些工具提示？

除了像上面你提到的解决方法之外，没有其他通用的方法。

在我的特定情况下这样做是否存在明显的缺点？

你似乎忽略了整个情况都很尴尬这一事实。如果你要把链接看起来像按钮，那么为什么还要使用链接呢？直接使用按钮就好了。同样，如果你最终会将它们替换成 spans，为什么还要使用链接呢？直接使用 spans 就好了。

我的尝试（见下文）是完成此目标的合理方式吗？

作为一种普遍的方法，它不太合理，因为你正在从文档中删除那些锚定元素，因此任何相关的事件监听器、扩展等都将丢失。它也许适用于你的特定情况，但一个更明智的方法是首先不要使用链接（参见上文）。

如果你仍然决定要做类似的事情，至少不要替换 a 元素。只需去掉其 href 属性并像你在示例中所做的那样设置事件监听器。现在它不再是一个链接，所以它不会出现在状态栏中（但至少它仍然是同一个元素）。