web-dev-qa-db-ja.com

ブラウザで「新しいタブでリンクを開く」を無効にする方法は？

ブラウザの右クリックメニューの[新しいタブでリンクを開く]オプションを無効/削除するにはどうすればよいですか？ javascriptなどでこれが不可能な場合、ユーザーがこのリンクをクリックしたときに何が起こるかを変更する方法はありますか。たとえば、アラートを表示したり、タブが読み込まれないようにしたりします。

javascriptbrowsercross-browser
13
grai

Hrefのクエリ文字列をajax関数に渡すだけで判明したため、主な問題は非常に簡単に解決されました。

私が望んでいたことは一時的な措置としてのみ意図されたものであると私の質問で説明すべきだったでしょう。とにかくすべてのコメントに感謝します。

2
grai

新しいタブ/ウィンドウでリンクを開く機能は、多くのブラウザのネイティブ機能です。このタイプのアクティビティを許可したくない場合は、リンクが実際にはリンクではないことをブラウザに通知する必要があります。これを行う最も簡単な方法は、href要素からa属性を削除することです。

HTML：

<a href="http://google.com">Can be opened in new tab/window</a>
<a>Cannot be opened in new tab/window</a>

これで、ブラウザがリンクを検出したときにデフォルトで実行している可能性のある他のことがいくつかあります。 a要素のスタイルを定義していない場合、新しい派手な疑似リンクがリンクのフォント（色、ポインター、下線）とともに表示されない可能性があります。あなたは先に進んでそれを簡単に行うことができます。

CSS：

a {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

これで、ブラウザの右クリックメニューの[新しいタブでリンクを開く]オプションを無効/削除する方法の質問に答えることができれば幸いです。追加のクレジットとして、クリックしたときにリンクを通常のリンクのように機能させたいと思うかもしれませんが。それを実現するために、JavaScriptを自由に使用してください。 jQueryを使用した例を次に示します。

JavaScript：

$("body").on("click", "a[data-href]", function() {
    var href = $(this).data("href");
    if (href) {
        location.href = href;
    }
});

変更されたHTML：

<a href="http://google.com">Can be opened in new tab/window</a>
<a data-href="http://google.com">Cannot be opened in new tab/window</a>

変更されたCSS：

a[href], a[data-href] {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

お役に立てれば！

9
Phil Klein

なぜ誰かがあなたの質問に反対票を投じるのかわかりません。グーグルで検索する必要があるのは、JavaScriptを使用してイベントをハイジャックする方法です。リンクをクリックして機能を停止すると、アラートを表示できます。 jQueryは人気のあるJSツールキットであり、要素のデフォルトイベントを平易な英語で停止するメソッドがあります。jQueryを使用すると、ハイパーリンクの機能を停止してアラートを表示することもできます。このリンク http://api.jquery.com/event.preventDefault/ はさらに役立ちます。 Webページを右クリックすると表示されるコンテキストメニューを無効にすることに関しては、そうです。私はJS忍者ではないので、コンテキストメニューからアイテムを削除できればコメントできませんが、IMOはできません。

0
Kumar

2019年

2つの重要なコメントを強調します。

  1. nnnnnn @ 2011年8月10日5:49：

    ユーザーとして、私はそのタイプの機能がリンクではなくボタンからトリガーされることを望んでいます。メニューを右クリックするか、中クリックして新しいタブで直接開くかを選択できるなど、リンクがより標準的な方法で機能することを期待しています。

  2. Pars @ 2013年12月21日13:10：

    これは、マウスの中ボタンをクリックするか、Ctrlキーを押しながらリンクをクリックすると機能しません。それらの場合の方法。

リンクの動作を取得するかどうかはブラウザ次第です。

一部の最新のブラウザ（Chromeなど）は、all以下の条件が一致する場合、リンクと見なします。

  1. これは<a>...</a>タグです（span、div、buttonなどではありません）。
  2. href属性があります。
  3. href属性は空ではありません。

以下取得しますリンクの動作：

<a href="http://www.website.com">Click Here</a>

以下取得されませんリンクの動作：

<a>Not link because no href</a>
<a href="">Not link because empty href</a>
<span>Not link because not "a" tag</span>
<span href="http://www.website.com">Not link because not "a" tag again</span>

重要な注意点：

繰り返しますが、決定するのはブラウザ次第です。一部の古い/愚かなブラウザは、上記の3つの条件のいずれかが一致する場合にリンク動作を与える可能性があります！

結論

リンクの場合は、<a href="some_link">...</a>を使用します。リンクでない場合は、<button>などの他のものを使用してください。

0
evilReiko