新しいウィンドウではなく新しいタブでURLを開く

2102

私は開こうとしています ポップアップウィンドウではなく、新しいタブでURLます。

回答が次のようになるような関連する質問を見てきました。

window.open(url,'_blank');
window.open(url);

しかし、どれも私にとってはうまくいきませんでした。ブラウザはまだポップアップウィンドウを開こうとしました。

javascript 
— マーク
ソース
85
これは通常好みの問題です。ウィンドウが好きな人（そしてこの振る舞いを激しく保護する人）やタブ（そしてこの振る舞いを激しく保護する人）もいます。したがって、デザインではなく、好みの問題であると一般に考えられている動作を無効にすることになります。
— Jared Farrish、2011
42
JavaScriptはブラウザとタブ対ウィンドウについて何も知らないため、新しいウィンドウを開く方法を決定するのはブラウザ次第です。
— Andrey、
3
ポップアップではなく新しいタブに表示するようにChromeを構成するにはどうすればよいですか？
— マーク
8
Gmailは少なくともChromeでなんとかしてこれを行います。メール行をShiftキーを押しながらクリックすると、そのメールが新しいウィンドウで開きます。Ctrlキーを押しながらクリックすると、新しいタブで開きます。唯一の問題：Gmailの難読化されたコードを掘り下げるのはPITAです
— Sergio
48
@Sergio、これはリンクのデフォルトのブラウザ動作です。（少なくともChromeとFirefoxの場合。）Gmailとは関係ありません。
— Qtax 2013

回答:

929

著者ができることは、新しいウィンドウではなく新しいタブで開くことを選択できます。それはユーザー設定ですです。（ほとんどのブラウザーのデフォルトのユーザー設定は新しいタブ用であるため、その設定が変更されていないブラウザーでの簡単なテストではこれが実証されないことに注意してください。）

CSS3はtarget-newを提案しましたが、仕様は放棄されました。

逆は真ではありません。の3番目の引数でウィンドウのサイズを指定することによりwindow.open()、設定がタブの場合に新しいウィンドウをトリガーできます。

— クエンティン
ソース
42
@AliHaideri Javascriptは、新しいタブ/ウィンドウを開く方法とは関係ありません。これはすべて、ブラウザの設定によって決まります。を使用しwindow.openてブラウザに何か新しいものを開くように指示すると、ブラウザはその設定で選択されているものを開きます-タブまたはウィンドウ。テストしたブラウザで、タブではなく新しいウィンドウで開くように設定を変更すると、他のソリューションが間違っていることがわかります。
— Ian
239
他の人に何かを言うよりも時間を無駄にする2つのことはできません。（1）に行うことができない何かがそれらを伝えることができます行われます。（2）黙っていて、できないことをする方法を探し続けさせる。
— クエンティン
8
@Cupcake —ドキュメントは通常、存在しない機能については説明しません。evernote.com/shard/s3/sh/428d2d68-39f9-491d-8352-8a9c217b67d7/…–
— Quentin
9
@Neel —多くの人が知りたいトピックについて簡潔に説明するため。
— クエンティン2014年
4
著者は物事を行うことができます（主に異なるコードを記述）。それらのどれもウィンドウの代わりにタブをトリガーしません。
— クエンティン2014年
1734

これはトリックです 

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

ほとんどの場合、onclickポップアップブロッカーとデフォルトの「新しいウィンドウ」の動作を防ぐために、リンクのハンドラーで直接これを行う必要があります。この方法で、またはDOMオブジェクトにイベントリスナーを追加することで実行できます。 

<div onclick="openInNewTab('www.test.com');">Something To Click On</div>

http://www.tutsplanet.com/open-url-new-tab-using-javascript/

— りんとうジョージ
ソース
117
動作しません。アドレスバーの右側にメッセージが表示されました：ポップアップがブロックされました。次に、ポップアップを許可しました。ちなみに、タブではなくポップアップで開きます！OS X Lion上のChrome 22.0.1229.94。
— 12
39
@ b1naryatr0phyそれはあなたが実際にそれを適切にテストしなかったからです。ブラウザの設定を変更します。タブで開くかウィンドウで開くかは、ブラウザの設定によって決まります。window.open（または任意のJavascript）を呼び出して新しいウィンドウ/タブを開く方法を選択することでできることは何もありません。
— Ian
質問：プロトコルなしでURLを設定しました（たとえば、my.site.com / Controller / Index）。結果として、現在のページのURL（OpenInNewTab関数を使用する場所）などのURLと、関数のURLに渡された新しいウィンドウ（タブ）を取得します。正しいリンクでプロトコルウィンドウが開きます。どうして？
— user2167382 2014年
2
var win = window.open（url、 '_blank'）; 「_blank」は不要です。window.open （）の場合、2番目のパラメーターはstrWindowNameです。新しいウィンドウの文字列名。この名前は、<a>または<form>要素のtarget属性を使用して、リンクおよびフォームのターゲットとして使用できます。名前には空白文字を含めないでください。strWindowNameは新しいウィンドウのタイトルを指定しないことに注意してください。
— hydRAnger 2015年
サンドボックス化されたiframeなしで新しいタブを開く方法はありますか？これを使用すると、document.domainの値がiframeとして開かれるため変更されないため、CORSエラーが発生します。
— Ids van der Zee 2017年
380

window.open()実際のクリックイベントで発生していない場合、新しいタブで開きません。与えられた例では、URLは実際のクリックイベントで開かれています。これは、ユーザーがブラウザで適切な設定をしている場合に機能します。

<a class="link">Link</a>
<script  type="text/javascript">
     $("a.link").on("click",function(){
         window.open('www.yourdomain.com','_blank');
     });
</script>

同様に、クリック関数内でAjax呼び出しを行おうとしていて、成功したときにウィンドウを開きたい場合は、async : falseオプションを設定してAjax呼び出しを行っていることを確認してください。

— ベンカットコトラ
ソース
28
これを正しい答えとしてマークするといいでしょう。Chrome v26（Windows）でのテストでは、コードがボタンのクリックハンドラー内にある場合は新しいタブが開き、コードがプログラムから（コンソールなどから）呼び出される場合は、新しいウィンドウが開くことを確認します。
— Cyber​​Fonic 2013
2
@Ianデフォルト設定のブラウザでの私のテストから、この回答は上記の回答が機能しない場合に機能します。「あなたができることは何もありません」という受け入れられた答えは、ユーザーがデフォルト設定を変更したときにのみ当てはまります。
— ガーフィールド
@Ianわかりやすくするために、ユーザー設定に関する警告の回答でこれについて言及しました。「これは、ユーザーがブラウザで適切な設定をしている場合に機能します。」大多数のユーザーはブラウザ設定を変更しないと思います。この回答は大多数のユーザーに有効です。
— Venkat Kotra 2013
async: falseChromeでは機能しません。コールバックから新しいウィンドウを開くには、HTTPリクエストを送信する前に空のウィンドウを開いてから、後で更新する必要があります。ここに良いハックがあります。
— attacomsian
250

window.open すべてのブラウザの新しいタブでポップアップを確実に開くことができない

ブラウザーの動作は window.open 、特にユーザーのブラウザー設定に関して、さまざまな方法で実装されます。window.openユーザーのブラウザー設定を処理する方法が異なるため、すべてのInternet Explorer、Firefox、およびChromeで同じ動作が当てはまるとは期待できません。

たとえば、Internet Explorer（11）のユーザーは新しいウィンドウまたは新しいタブでポップアップを開くことを選択できます。クエンティンの回答で示唆されているように、Internet Explorer 11のユーザーにを介して特定の方法でポップアップを開かせることはできません 。window.open

Firefox（29）ユーザーの場合、使用window.open(url, '_blank') はブラウザーのタブ設定に依存しますが、幅と高さを指定することで、強制的に新しいウィンドウでポップアップを開くことができます（以下の「Chromeについて」セクションを参照）。

デモンストレーション

ブラウザの設定に移動し、新しいウィンドウでポップアップを開くように設定します。

Internet Explorer（11）

Internet Explorer設定ダイアログ1

Internet Explorerタブ設定ダイアログ

テストページ

上記の例のように、新しいウィンドウでポップアップを開くようにInternet Explorer（11）を設定したら、次のテストページを使用してテストしますwindow.open。

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <code>window.open(url)</code>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <code>window.open(url, '_blank')</code>
    </button>
  </body>
</html>

ポップアップが新しいタブではなく、新しいウィンドウで開かれていることを確認します。

上記のスニペットをタブ設定を新しいウィンドウに設定してFirefox（29）でテストし、同じ結果を確認することもできます。

Chromeについてはどうですか？window.openInternet Explorer（11）およびFirefox（29）とは異なる方法で実装されます。

100％確信はありませんが、Chrome（バージョン34.0.1847.131 m）には、ユーザーが新しいウィンドウまたは新しいタブ（FirefoxやInternet Explorerなど）でポップアップを開くかどうかを選択できる設定がないようです持ってる）。ポップアップの管理についてChromeのドキュメントを確認しましたが、そのようなことについては何も触れられていませんでした。

また、再び、異なるブラウザーは異なる動作を実装するようです window.open 。ChromeとFirefoxでは、幅と高さを指定すると、ユーザーが新しいタブで新しいウィンドウを開くようにFirefox（29）を設定した場合でも、ポップアップが強制されます（JavaScriptの回答で、タブではなく新しいウィンドウで開くように説明されています）。 ：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
      <code>window.open(url)</code>
    </button>
  </body>
</html>

ただし、ユーザーがタブをブラウザー設定として設定した場合、上記の同じコードスニペットは常にInternet Explorer 11で新しいタブを開きます。幅と高さを指定しなくても、新しいウィンドウポップアップが強制されます。

したがって、window.openChrome の動作は、onclickイベントで使用されたときにポップアップを新しいタブで開き、ブラウザコンソールから使用されたときに新しいウィンドウで開き（他の人が指摘しているように）、次のときに新しいウィンドウで開くようです。幅と高さで指定されます。

概要

ブラウザーが window.open 異なれば、ユーザーのブラウザー設定に関する動作も異なります。window.openユーザーのブラウザー設定を処理する方法が異なるため、すべてのInternet Explorer、Firefox、およびChromeで同じ動作が当てはまるとは期待できません。

追加の読書

— ピーター・モーテンセン
ソース
12
あなたは質問に答えませんでした、あなたは単にwindow.openが矛盾していることを証明しました。
— BentOnCoding
223

一発ギャグ：

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

それは仮想a要素を作成し、それをtarget="_blank"新しいタブで開くように指定し、適切に指定url hrefしてからクリックします。

そして、必要に応じて、それに基づいていくつかの関数を作成できます。

function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    href,
  }).click();
}

そして、あなたはそれを次のように使うことができます：

openInNewTab("https://google.com");

重要な注意点：

openInNewTab（およびこのページの他のソリューションと同様に）ユーザーアクションコールバック中に呼び出す必要があります。クリックイベント内（コールバック関数では直接必要ありませんが、クリックアクション中）。

ランダムな瞬間に手動で呼び出す場合（例：インターバル内またはサーバーの応答後）-ブラウザーによってブロックされる可能性があります（これは、セキュリティリスクとなり、ユーザーエクスペリエンスが非常に低下する可能性があるため、理にかなっています） ）

— pie6k
ソース
8
ありがとうございました。あなたのpure-JSには欠けている部分があります-Luke Aldertonが書いたように（以下を参照）、作成された要素をドキュメント本文に添付する必要があります。コードでは、それはvoidにぶら下がっています。少なくともFirefox 37では何もしません。 。
— greenoldman
4
@mcginniwaこのようなアクション-マウスのクリックなどのユーザーアクションによってトリガーされない場合、ポップアップブロッカーがオンになります。ユーザーが操作しなくても、JavaScriptで任意のURLを開くことができると想像してください。これは非常に危険です。このコードをクリック関数などのイベント内に配置すると、正常に動作します-ここで提案されているすべてのソリューションと同じです。
— pie6k 2015年
4
：次のようにあなたのコードを簡素化することができます $('<a />',{'href': url, 'target', '_blank'}).get(0).click();
— shaedrichを
5
あなたの切り取られたものに触発された@shaedrich私はjquery以外のワンライナーを追加しました：Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
— pie6k 2018年
FFでは動きません！
— Nolesh
91

を使用するとwindow.open(url, '_blank')、Chromeでブロックされます（ポップアップブロッカー）。

これを試して：

//With JQuery

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

純粋なJavaScriptでは、

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};
— モハメッドより安全
ソース
しかし、この質問では、サイト作成者については触れていません。新しいウィンドウまたは新しいタブでURLを開きたいだけです。これはブラウザに依存します。著者について気にする必要はありません。そのフィドルを確認してください。それは働いています
— Mohammed Safeer
js fiddleとplunkerでは機能しませんでしたが、htmlファイルを作成すると機能します。それはjsフィドル、出力がiframeに表示されるため、新しいウィンドウがブロックされるためですthe request was made in a sandboxed frame whose 'allow-popups' permission is not set
— Mohammed Safeer
67

スティーブン・スピルバーグの答えを詳しく説明するために、私はそのような場合にこれを行いました：

$('a').click(function() {
  $(this).attr('target', '_blank');
});

このように、ブラウザがリンクをたどる直前にtarget属性を設定しているため、リンクが新しいタブまたはウィンドウで開かれます（ユーザーの設定によって異なります）。

jQueryの1行の例：

$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.

これは、ネイティブブラウザのDOM APIを使用するだけでも実現できます。

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
— arikfr
ソース
58

私は以下を使用し、それは非常にうまくいきます！

window.open(url, '_blank').focus();
— エセキエル・ガルシア
ソース
2
ブラウザの設定によっては、新しいタブまたはウィンドウで開く場合があります。問題は、プリファレンスが新しいウィンドウ用である場合でも、新しいタブで開くことです。
— クエンティン
19

興味深い事実は、アクションがユーザーによって呼び出されない場合（ボタンをクリックするなど）、または非同期の場合、新しいタブを開くことができないことです。たとえば、これは新しいタブで開かれません。

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

ただし、ブラウザの設定によっては、新しいタブで開く場合があります。

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});
— カラクスナ
ソース
2
これは、Firefox 28、Chrome 34b、およびSafari 7.0.2のポップアップとしてすべてのストック設定でブロックされています。:(
— スティーブMeisner 14年
1
「アクションがユーザーによって呼び出されない（ボタンをクリックするなど）か、非同期である場合、新しいタブを開くことができません。」 -Chromeには当てはまりますが、すべてのブラウザーに当てはまるわけではありません。ファイルに保存<script>open('http://google.com')</script>して.html、最新バージョンのFirefoxの新規インストールで開きます。新しいウィンドウではなく、Firefoxが喜んでGoogleを新しいタブ（おそらく、ポップアップを許可するように指示した後）で開きます。
— Mark Amery、2016年
13

[strWindowFeatures]パラメータを省略するだけで、ブラウザ設定がオーバーライドしない限り、新しいタブが開きます（ブラウザ設定がJavaScriptより優先されます）。

新しい窓

var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

新しいタブ

var myWin = window.open(strUrl, strWindowName);

-または-

var myWin = window.open(strUrl);
— マニーC
ソース
11 
(function(a){
document.body.appendChild(a);
a.setAttribute('href', location.href);
a.dispatchEvent((function(e){
    e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
    return e
}(document.createEvent('MouseEvents'))))}(document.createElement('a')))
— スピリンブラジミール
ソース
11

あなたはトリックを使うことができますform：

$(function () {
    $('#btn').click(function () {
        openNewTab("http://stackoverflow.com")
        return false;
    });
});

function openNewTab(link) {
    var frm = $('<form   method="get" action="' + link + '" target="_blank"></form>')
    $("body").append(frm);
    frm.submit().remove();
}

jsFiddleデモ

— CodeNinja
ソース
4
このメソッドを使用する場合は、フォーム送信によってスキップされるため、URLにクエリパラメータがないことを確認してください。1つの解決策は、クエリパラメータ内のすべてのパラメータのnameキーおよびvalue値として、フォーム要素内に非表示の入力要素を埋め込むことです。その後、フォームを送信します
— Mudassir Ali 2016
これaは、フォームの代わりにタグを使用し、jQuery .click()メソッドを使用して「送信」することで、より簡単に行うことができます。私の答えを
10

カスタム関数から新しいタブを開こうとしている場合、これはブラウザ設定とは関係ありません。

このページで、JavaScriptコンソールを開き、次のように入力します。

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

また、「クリック」はカスタムアクションから発生するため、設定に関係なくポップアップを開こうとします。

リンク上の実際の「マウスクリック」のように動作するためには、あなたはに従う必要がありspirinvladimirの助言@と本当にそれを作成します。

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
  return e
}(document.createEvent('MouseEvents'))));

以下に完全な例を示します（jsFiddleまたは同様のオンラインエディターでは試さないでください。外部のページにリダイレクトできないためです）。

<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <a id="my_link" href="http://www.google.com"> Go to Google </a>
  <div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
  function fire_custom_click() {
    alert("firing click!");
    document.getElementById("my_link").dispatchEvent((function(e){
      e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
            0, 0, 0, 0, 0,              /* detail, screenX, screenY, clientX, clientY */
            false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
            0, null);                   /* button, relatedTarget */
      return e
    }(document.createEvent('MouseEvents'))));
  }
  document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>
— チパイロン
ソース
1
最終的にはw = window.open("placeholder"); $.ajax(...ajax call that returns the url...) success (...w.location = data.url...)、theandystratton.com
— ポール
11
@FahadAbidJanjuaそれは絶対にありません正しいです。それでもブラウザの設定に依存します。「カスタムアクション」はタブではなくポップアップで開かなければならないことを宣言するHTMLまたはJavaScript仕様には何もありません。実際、現在のマシンのどのブラウザーもこの動作を示していません。
— nmclean 14
7 
function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}
— アンドリュールカ
ソース
1
ブラウザの設定によっては、新しいタブまたはウィンドウで開く場合があります。問題は、プリファレンスが新しいウィンドウ用である場合でも、新しいタブで開くことです。
— クエンティン
3

jQuery

$('<a />',{'href': url, 'target': '_blank'}).get(0).click();

JS

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
— ブライアン
ソース
ブラウザの設定によっては、新しいタブまたはウィンドウで開く場合があります。問題は、プリファレンスが新しいウィンドウ用である場合でも、新しいタブで開くことです。
— クエンティン
2

または、リンク要素を作成してクリックすることもできます...

var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);

これはポップアップブロッカーによってブロックされるべきではありません...うまくいけば。

— ルーク・アルダートン
ソース
2

この質問に対する答えはあり、それはノーではありません。

私は簡単な回避策を見つけました：

ステップ1：非表示のリンクを作成します。

<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>

ステップ2：プログラムでそのリンクをクリックします。

document.getElementById("yourId").click();

どうぞ！私にとって魅力的な作品です。

— ALZlper
ソース
ブラウザの設定によっては、新しいタブまたはウィンドウで開く場合があります。問題は、プリファレンスが新しいウィンドウ用である場合でも、新しいタブで開くことです。
— クエンティン
1

ここに画像の説明を入力してください

新しいタブを開いて同じタブにとどまる方法について多くの情報を調査しました。私はそれを行うための小さなトリックを1つ見つけました。開く必要があるURL- newUrlと古いURL- currentUrlがあるとしましょう。これらは新しいタブが開いた後もそのままにする必要があります。JSコードは次のようになります。

// init urls
let newUrl = 'http://example.com';
let currentUrl = window.location.href;
// open window with url of current page, you will be automatically moved 
// by browser to a new opened tab. It will look like your page is reloaded
// and you will stay on same page but with new page opened
window.open(currentUrl , '_blank');
// on your current tab will be opened new url
location.href = newUrl;
— ヴァハ
ソース
問題は、ユーザーの好みが新しいウィンドウで開くことであるときに新しいタブを開くことです。新しいタブでURLを開くと同時に、既存のタブで別のURLを開く方法を尋ねるのではありません。
— クエンティン
0

どのように作成する方法について<a>と_blankとtarget属性値とurlなどhrefスタイルのディスプレイで、：AA子供要素で隠されましたか？次に、DOMに追加して、子要素でクリックイベントをトリガーします。

更新

それはうまくいきません。ブラウザはデフォルトの動作を妨げます。プログラムでトリガーすることもできますが、デフォルトの動作には従いません。

自分で確認してください：http : //jsfiddle.net/4S4ET/

— ビクター
ソース
-1

Firefox（Mozilla）拡張機能から新しいタブを開くと、次のようになります。

gBrowser.selectedTab = gBrowser.addTab("http://example.com");
— Smile4ever
ソース
-1

この方法は上記のソリューションに似ていますが、実装方法が異なります

.social_icon-> CSSのあるクラス 

 <div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>


 $('.social_icon').click(function(){

        var url = $(this).attr('data-url');
        var win = window.open(url, '_blank');  ///similar to above solution
        win.focus();
   });
— CG_DEV
ソース
-1

これはハックかもしれませんが、Firefoxで3番目のパラメーター「fullscreen = yes」を指定すると、新しいウィンドウが開きます。

例えば、

<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

ブラウザの設定を実際に上書きしているようです。

— クナル
ソース
-1

これは私にとってはうまくいき、イベントを防止し、URLを追加してから、<a> tagその上でクリックイベントをトリガーしますtag。

Js
$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href',"http://someurl.com");
        $(this).trigger('click');
});
HTML
<a href="#" class="myBtn" target="_blank">Go</a>
— カルロス・サラザール
ソース
ブラウザの設定によっては、新しいタブまたはウィンドウで開く場合があります。問題は、プリファレンスが新しいウィンドウ用である場合でも、新しいタブで開くことです。
— クエンティン
-1

window.open(url)新しいブラウザタブでURLを開きます。それより下のJS代替

let a= document.createElement('a');
a.target= '_blank';
a.href= 'https://support.wwf.org.uk/';
a.click(); // we don't need to remove 'a' from DOM because we not add it

ここに作業例があります（stackoverflowスニペットでは新しいタブを開くことができません）

— カミル・キエチェフスキ
ソース
「window.open（url）は新しいブラウザタブでURLを開きます」—新しいウィンドウまたは新しいタブに対するユーザーの設定に従います。設定がウィンドウの場合、新しいタブを強制しません。（これが質問の内容です）。同じことがtarget = _blankにも当てはまります。
— クエンティン
あなたが提案する両方のアプローチは、この質問に対する以前の56の削除されていない回答で何度も言及（および批判）されています。
— クエンティン
-1

URLを新しいタブで開くか新しいウィンドウで開くかは、実際にはユーザーのブラウザー設定によって制御されます。JavaScriptでオーバーライドする方法はありません。

window.open()使用方法によって動作が異なります。ユーザーアクションの直接の結果として呼び出された場合、ボタンのクリックとしましょう。これは正常に機能し、新しいタブ（またはウィンドウ）を開きます。

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {
    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');
});

ただし、AJAXリクエストコールバックから新しいタブを開こうとした場合、直接のユーザーアクションであるため、ブラウザはそのをブロックします。

ポップアップブロッカーをバイパスし、コールバックから新しいタブを開くには、次の小さなハックがあります。

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('/api/validate')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});
— attacomsian
ソース
-1

私はこの方法を試しました、そしてそれはうまくいくようです

window.open('example.com', 'newWin');

私はここで多くの実用的な例を見つけました：

http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html#TestPopupControl

— アルテム・シェフツォフ
ソース
ユーザーの好みに応じて、新しいタブまたはウィンドウで開きます。それは問題が何であるかである新しいタブを強制しません。
— クエンティン
OPがすでにそれを試みたときに、質問の一部を逃しましたか？またはstackoverflow.com/a/59565074/19068？またはstackoverflow.com/a/35939565/19068？またはstackoverflow.com/a/30512485/19068？またはstackoverflow.com/a/11384018/19068？またはstackoverflow.com/a/26990478/19068？
— クエンティン
@Quentinその部分を逃しましたが、2番目のパラメーター«windowName»を«_blank»と等しいかまったく指定せずにwindow.openを呼び出そうとすると、最新のGoogle Chromeにポップアップまたは新しいタブが表示されません。ウィンドウ名を«newWin»に変更すると、新しいタブが開きました。ウィンドウ名パラメータはオプションなので、奇妙です。
— Artem Shevtsov
-4

私は、次のように書いた人と多少同意します（言い換えると、「既存のWebページのリンクの場合、新しいページが同じWebサイトの一部である場合、ブラウザは常に新しいタブでリンクを開きます。既存のウェブページ。」少なくとも私にとっては、この「一般的なルール」はChrome、Firefox、Opera、IE、Safari、SeaMonkey、Konquerorで機能します。

とにかく、他の人が提示したものを利用するためのそれほど複雑でない方法があります。ブラウザーの動作を制御したい独自のWebサイト（以下の「thissite.com」）について話していると仮定すると、以下では、「specialpage.htm」を空にして、HTMLをまったく使用しないようにします（サーバーからデータを送信する時間を節約できます！）

 var wnd, URL;  //global variables

 //specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
 wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); //get reference to just-opened page
 //if the "general rule" above is true, a new tab should have been opened.
 URL = "http://www.someothersite.com/desiredpage.htm";  //ultimate destination
 setTimeout(gotoURL(),200);  //wait 1/5 of a second; give browser time to create tab/window for empty page


 function gotoURL()
 { wnd.open(URL, "_self");  //replace the blank page, in the tab, with the desired page
   wnd.focus();             //when browser not set to automatically show newly-opened page, this MAY work
 }
— vernonner3voltazim
ソース
-7

外部リンク（他のサイトに移動するリンク）のみを開きたい場合は、次のJavaScript / jQueryが適切に機能します。

$(function(){
    var hostname = window.location.hostname.replace('www.', '');
    $('a').each(function(){
        var link_host = $(this).attr('hostname').replace('www.', '');
        if (link_host !== hostname) {
            $(this).attr('target', '_blank');
        }
    });
});
— Michael
ソース
この回答はこの質問には適していませんが、これは非常に役立ちます。あなたの考えをありがとう！
— Nuri Akman 2014年
-9

リンクが同じドメイン上（同じWebサイト上）にある場合、ブラウザーは常に新しいタブでリンクを開きます。リンクが他のドメインにある場合は、ブラウザーの設定に応じて、新しいタブ/ウィンドウでリンクが開きます。

したがって、これによれば、以下を使用できます。

<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>

そして、いくつかのjQueryコードを追加します。

jQuery(document).ready(function () {
    jQuery(".my-link").on("click",function(){
        var w = window.open('http://www.mywebsite.com','_blank');
        w.focus();
        w.location.href = jQuery(this).attr('rel');
        return false;
    });
});

したがって、最初に同じウェブサイトで_blankターゲットを使用して新しいウィンドウを開き（新しいタブで開きます）、次にその新しいウィンドウ内で目的のウェブサイトを開きます。

— loshMiS
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.