web-dev-qa-db-ja.com

Googleを削除/移動Chrome左下のステータスバー（リンクアドレスバー）

私は、左下隅に主要なナビゲーション要素が設計されているウェブサイトに取り組んでいます。 Google内ではChrome左下にステータスバーがあり、ページ上のリンクをロールオーバーするとページのURLが表示されます。十分に近づくと、右下。これは、このナビゲーション要素の邪魔になっています。

私の質問は、CSS、HTML、またはJavaScriptを使用してこれを削除/移動（右下）できるかどうかです。以下の注意事項をご覧ください。

  • 理想的には、これを永久に右に移動したいと思います。
  • これは多くの理由で必須/ベストプラクティスであることを認識しているので、削除しないようにしたいと思います。
  • リンクからhrefを削除してonClickイベントを使用できることは承知しています。これは可能な回避策ですが、この場合は右に移動することをお勧めします。
  • とにかく、このナビゲーション要素を左下に配置することについては大きな議論があると確信していますが、操作する必要があるパラメーター内の解決策を探しています。

ありがとう

javascriptjqueryhtmlcssgoogle-chrome
10
alexmcfarlane

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"_になります。

14
ThiagoPXP

このスクリーンショットからわかるように、Chromeは、エッジ上のリンク（「コメントを追加」リンク）をロールオーバーすると、ステータスバーがウィンドウの範囲外に移動するようですこの場合には）。

だから…気にしません。ブラウザーの動作に組み込まれているため、変更が非常に困難になります。むかしむかし、javascriptを使用してステータスバーのコンテンツを変更することができましたが、ブラウザのベンダーはあらゆるセキュリティ上の理由でこれを止めました。

onclickボッジにうんざりしないでください。あなたはアクセシビリティを失うでしょう、そして、html悪魔はあなたのすべての眠っている瞬間を悩ませます。

実際、これはすべて望ましい動作と考えることができます。ナビゲーションとステータスがすぐ隣にあるため、ユーザーが適切なナビゲーションを選択するのは非常に簡単です（URLがユーザーフレンドリーであることが前提です）。

Screenshot of described behaviour

tl/dr：しないでください。

2
graphicdivine

リンク付きのこの小さなステータスがhrefでポップアップされるようです。 href属性なしで要素を作成し、代わりにonclickイベントを使用してユーザーに指示することができます。

実は、訪問した機能が不足していると思います。

0
Gal Ziv