禁用浏览器状态栏文本
Posted
技术标签:
【中文标题】禁用浏览器状态栏文本【英文标题】：Disabling browser status bar text 【发布时间】：2012-05-15 03:12:50 【问题描述】：背景
现代浏览器摒弃了经典的状态栏，而是在其窗口底部绘制了一个小工具提示，用于在悬停/聚焦时显示链接目标。
以下屏幕截图说明了这种（在我的情况下是不受欢迎的）行为的示例：
问题
-
是否有一种可移植的方式来禁用这些工具提示？
在我的特殊情况下，我是否遗漏了任何明显的缺点？
我的尝试（见下文）是实现此目的的合理方法吗？
推理
我正在开发一个 Intranet Web 应用程序，并希望对某些特定于应用程序的操作禁用此行为，因为坦率地说，https://server/# 无处不在，看起来让人眼花缭乱，因为在某些情况下我的应用程序会自己绘制该位置的状态栏。
我的尝试
我不是专业的网络开发人员，所以我在这个领域的知识仍然相当有限。
无论如何，这是我对 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() 用span 元素替换所有包含# 的链接（即，在我的例子中，特定于应用程序的操作），使所有“外部”链接在新选项卡/窗口中打开并且似乎没有中断自定义协议处理。
【问题讨论】：
***.com/questions/876390/… 【参考方案1】：是否有一种可移植的方式来禁用这些工具提示？
不，除了上面示例中的解决方法。
在我的特定情况下，我是否遗漏了任何明显的缺点？
您似乎忽略了整个情况很尴尬的事实。如果你想让它们看起来像按钮，为什么还要有链接呢？只需使用按钮。就此而言，如果您最终还是用跨度将它们切换出来，为什么还要打扰链接呢？只需使用跨度。
我的尝试（见下文）是实现此目的的合理方式吗？
作为一种通用方法，这并不合理，因为您要从文档中删除那些锚元素，因此任何附加的事件侦听器、expandos 等都将丢失。它可能适用于您的具体情况，但更明智的方法是首先不使用链接（见上文）。
如果你仍然下定决心要做这样的事情，至少不要替换 a 元素。只需摆脱它的href 属性并设置一个事件侦听器，就像您在示例中所做的那样。现在它不再是一个链接，所以它不会出现在状态栏中（但至少它仍然是同一个元素）。
【讨论】：
您的最后一个建议非常有效。不知道你可以用空的a 元素做到这一点。
如果您可以控制标记，我会认真考虑让它们首先不是链接。例如，更改应用程序中的数据的操作应始终通过 POST 而不是 GET 进行，即使在 Intranet 应用程序中也是如此……如果是这样，它们肯定应该是按钮。状态栏本身确实不是什么大问题，但它可能表明设计不佳。
感谢您的建议。在我的大多数用例中，按钮在语义上更有意义。我会玩这个。【参考方案2】：
<button onclick="window.open('yoururlhere.html','_self')">your link text here</button>
请注意，这会将 ctrl 单击视为普通单击并禁用右键单击。我不知道中间点击。
您也可以使用“a”，只需将 href 替换为上面代码中的 onclick，但是当我尝试“a:hover”样式停止工作时。显然，没有 href 的“a”被认为是不可悬停的，至少在 Firefox 中是这样。所以我切换到“按钮”和“按钮：悬停”样式，一切都很好。
我知道这种解决方案会被视为不好的做法，但在某些情况下，例如我制作的网站主要由全屏照片组成，美学胜过原则。
【讨论】：
【参考方案3】：工具提示向用户提供了一个指示，如果点击了链接，他们会将他们带到哪里。它是标准浏览器用户体验的一部分，并且是您网站用户所期望的。因为你认为它看起来不好看而改变这种期望可能会导致糟糕的用户体验。一旦用户停止将鼠标悬停在链接标签上，该区域中显示的任何内容都将可见。
我知道任何不告诉我去向的链接在我看来都很可疑。
【讨论】：
感谢您提供答案。我意识到这在 99% 的情况下都不是一个好主意，但是，就我而言，这些链接中的大多数都是看起来像按钮和其他 Windows UI 元素的操作。我的应用程序应该像桌面应用程序一样，但在浏览器中。我认为在这种情况下，出于美学原因，仅针对这些元素禁用工具提示是可以的。外部链接和自定义协议保持不变。 实际上 100% 的情况下这并不是一个好主意，这就是为什么浏览器已经完全停止让人们对状态栏内容感到厌烦了。你为什么不把它放在一边，看看有没有人抱怨？ 这不仅仅是一个审美问题。看看上面 j08691 提供的链接中的这个屏幕截图：i.imgur.com/mlnYN.png 工具提示正在阻止站点内容。对于实现自己的状态栏的 Web 应用程序，禁用它以执行特定于应用程序的操作是正当的理由。同样，外部链接未受影响。 这是您的应用程序，因此您显然可以做您认为最好的事情。一般来说，破坏网络为一个站点工作的方式是不受欢迎的。在您提供的示例中，用户只需将鼠标移动几个像素，所有内容就会再次可见。您的网站信息不会被永久隐藏。 人们似乎忘记了浏览器是一个很好的低成本交付内部企业应用程序的平台，因此禁用状态工具提示不会“100% 地破坏网络”。例如，我的应用程序的目标受众约为 25 人。状态工具提示很丑陋，我的用户并不关心链接将他们带到哪里，因为该页面的设计不像“传统网页”。这不仅仅是链接文本，它是我想摆脱的页面加载状态。我认为无法禁用它是愚蠢的。什么时候删除选择是个好主意？【参考方案4】：试试这个
$(this).removeAttr("href");
$(this).click(function()).mouseover(function().........).etc
【讨论】：
【参考方案5】：这就是我使用 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');
);
);
【讨论】：
不，示例只是正常的鼠标点击。将 click() 更改为 mousedown() 以捕获我认为的所有鼠标按钮。未经测试...这可能会有所帮助； ***.com/a/2725963/536590以上是关于禁用浏览器状态栏文本的主要内容，如果未能解决你的问题，请参考以下文章