移除/移动Google Chrome左下方状态栏(链接地址栏)

时间:2014-05-22 07:17:00

标签: javascript jquery html css google-chrome

我正在使用左下角设计了一个关键导航元素的网站。在谷歌浏览器中,左下角有一个状态栏,当您翻转页面上的链接并显示该页面的URL时,会出现该状态栏。虽然如果你足够近,这会移动到右下方。这妨碍了这个导航元素。

我的问题是可以使用CSS,HTML或JavaScript删除/移动(右下角)吗?请参阅下面的一些注释。

  • 理想情况下,我想永久地向右移动。
  • 我知道这是必需/最佳做法,原因很多,所以我想避免删除。
  • 我知道我可以从链接中删除href并使用onClick事件,这可能是一种可能的解决方法,但在这种情况下向右移动将是更好的解决方案。
  • 我也确定无论如何都要对这个导航元素左下方进行一场大辩论,但我正在寻找一个我必须使用的参数中的解决方案。

由于

3 个答案:

答案 0 :(得分:14)

Chrome会从您的链接中读取HREF属性,以显示状态栏中的链接。

因此,如果从A标签中删除HREF,则不会显示状态栏。然而,链接也不起作用,:)。这就是为什么你可以在MouseOver上创建一个事件处理程序来解决这个问题并保持你的链接正常工作的原因。

$("body").on('mouseover', 'a', function (e) {
    var $link = $(this),
        href = $link.attr('href') || $link.data("href");

    $link.off('click.chrome');
    $link.on('click.chrome', function () {
        window.location.href = href;
    })
    .attr('data-href', href) //keeps track of the href value
    .css({ cursor: 'pointer' })
    .removeAttr('href'); // <- this is what stops Chrome to display status bar
});

您可能会遇到其他问题,例如已禁用的链接或具有其他事件处理程序的链接。在这种情况下,您可以将选择器调整为'a:not(.disabled)',或者只是将此委托添加到css类".disable-status"的已知元素,因此您的选择器将为:"a.disable-status"

答案 1 :(得分:2)

从这个屏幕截图中可以看出,当您翻转边缘的链接时,Chrome似乎会将状态栏移到窗口范围之外(&#34;添加评论&#34;链接到这个例子)。

所以......我不担心。它内置于浏览器行为中,因此很难改变。曾几何时,您可以使用javascript来修改状态栏的内容,但浏览器供应商会因各种安全原因而停止此操作。

不要被onclick小屋诱惑。您将失去可访问性,并且html恶魔将困扰您的每一个沉睡时刻。

事实上,您可以将这一切视为理想的行为:您的导航和状态彼此相邻,使用户可以非常轻松地做出正确的导航选择(假设您的网址对用户友好)。

Screenshot of described behaviour

tl / dr:不要。

答案 2 :(得分:0)

因为似乎带有链接的这个小状态加上了href。您可以创建不带href属性的元素,而是使用onclick事件来指导用户。

只是在事情上,我认为你缺乏访问过的功能。