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

javascript


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

関連した質問で、回答がこんな感じになるのを見たことがあります。

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

しかし、どれも私のために動作しませんでした、ブラウザは依然としてポップアップウィンドウを開こうとしました。




Answer 1 Quentin


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

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

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




Answer 2 Rinto George


これは仕掛けです。

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/




Answer 3 Venkat Kotra


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呼び出しを実行していることを確認してください。




Answer 4 Peter Mortensen


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

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

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

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

Demonstration

ブラウザの設定で、新しいウィンドウでポップアップを開くように設定してください。

インターネットエクスプローラ (11)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

テストページ

上記の例のように、新しいウィンドウでポップアップを開くように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.open を実装しますInternet 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で新しいタブを開きます。幅と高さを指定しなくても、新しいウィンドウポップアップが強制されます。

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

Summary

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

追加の読み物




Answer 5 pie6k


一本のライナー。

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 (およびこのページの他のソリューション)は、ユーザーアクションコールバック中に呼び出す必要があります。クリックイベント内(コールバック関数では直接必要ありませんが、クリックアクション中)。

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