Chrome、Javascript、window.open in new tab


110

クロムでは、これは新しいタブで開きます:

<button onclick="window.open('newpage.html', '_blank')" />

これは新しいウィンドウで開きます(ただし、これも新しいタブで開くようにしたい:

<script language="javascript">
  window.open('newpage.html', '_blank');
</script>

これは実現可能ですか?


2
あなたが断言していることについて確信がありますか?どちらのフラグメントも同じ結果になります。
DenysSéguret2013

1
ウィンドウがタブで開くか新しいウィンドウで開くかは、ローカルブラウザー次第であり、ユーザーがブラウザーを構成する方法です。これは、JavaScriptで指定できるものではありません。
jfriend00 2013

回答:


150

これはInternet Explorerユーザーが制御するオプションであるため、直接制御することはできません。

別のウィンドウ名でWindow.openを使用してページを開くと、ポップアップのような新しいブラウザーウィンドウで開くか、ユーザーがブラウザーを設定した場合は新しいタブで開きます。

編集:

より詳細な説明:

1。最新のブラウザでは、window.openはポップアップではなく新しいタブで開きます。

2。 3番目のパラメーターでオプションを指定することにより、ブラウザーに強制的に新しいウィンドウ(「ポップアップ」)を使用させることができます。

3. window.open呼び出しがユーザー開始イベントの一部ではなかった場合、新しいウィンドウで開きます。

4.「ユーザーが開始したイベント」は同じ関数呼び出しである必要はありませんが、ユーザーのクリックによって呼び出された関数で発生する必要があります

5。ユーザーが開始したイベントが関数呼び出しを委任または延期した場合(イベントリスナーまたはデリゲートがクリックイベントにバインドされていない場合、またはsetTimeoutを使用した場合など)、「ユーザー開始」としてのステータスを失います。

6。一部のポップアップブロッカーは、ユーザーが開始したイベントから開いたウィンドウを許可しますが、他の方法で開いたウィンドウは許可しません。

7。ポップアップがブロックされている場合、ブロッカーによって(ユーザーが開始したイベントを介して)通常許可されているポップアップもブロックされることがあります。いくつかの例…

新しいタブではなく、新しいブラウザインスタンスでウィンドウを強制的に開く:

window.open('page.php', '', 'width=1000');

次の例では、別の関数を呼び出していますが、ユーザーが開始したイベントとしての資格があります。

function o(){
  window.open('page.php');
}
$('button').addEvent('click', o);

以下は、setTimeoutが遅延するため、ユーザーが開始したイベントとは見なされません。

function g(){
  setTimeout(o, 1);
}
function o(){
  window.open('page.php');
}
$('button').addEvent('click', g);

2
ChromeとFFでテストして追加したいのですが、「ユーザーが開始したイベント」として定義したウィンドウでwindow.openを使用すると、ブラウザーのデフォルトアクションが保持されることがわかりました。つまり、ChromeでShiftキーを押しながらChromeをクリックして新しいブラウザウィンドウをクリックすると、Ctrlキーを押したまま(またはマウスの中央ボタンを押す)と、新しいタブがバックグラウンドで開きます。これは非常に便利です。アンカータグを全体に配置しなくても、いくつかのことができます。
ホフマン

3
「window.open呼び出しがユーザーが開始したイベントの一部ではなかった場合、新しいウィンドウで開きます。」いいえ、ほぼ確実に開かれません。
TJクラウダー2014年

3
2014年9月29日の時点で、最新のFirefox ESRおよびIE 11は、js呼び出しが_blankをウィンドウ名として使用すると、新しいウィンドウで_blankまたはwindow.openリンクを開きます。現在のChromeはそれほど単純ではありません。上、左、幅、高さ、ツールバー、場所、ディレクトリ、ステータス、メニューバー、スクロールバー、サイズ変更可能パスを通過する新しいウィンドウを開いて、それぞれを順番に省略してテストしました。Chromeでは、ステータス、メニューバー、またはスクロールバーが省略されている場合を除いて、すべて新しいタブで開きました。これは非常に恣意的であるように思われがちですが、経験的にそれが起こりました。ここに例:jsbin.com/mobiyeqojaha/1
enigment

34

ユーザーが好みに応じて、タブを強制的に使用すると便利な場合があります。Prakashが上で述べたように、これはユーザーが開始しないイベントを使用することによって指示される場合がありますが、それを回避する方法があります。

例えば:

$("#theButton").button().click( function(event) {
   $.post( url, data )
   .always( function( response ) {
      window.open( newurl + response, '_blank' );
   } );
} );

「常に」機能はユーザーが開始したとは見なされないため、新しいブラウザウィンドウで常に「newurl」を開きます。ただし、これを行う場合:

$("#theButton").button().click( function(event) {
   var newtab = window.open( '', '_blank' );
   $.post( url, data )
   .always( function( response ) {
      newtab.location = newurl + response;
   } );
} );

新しいブラウザウィンドウを開くか、新しいタブを作成します。これは、ユーザーが開始したボタンクリックのユーザー設定によって決まります。次に、AJAX投稿から戻った後、場所を目的のURLに設定します。ほら、ユーザーが気に入ったらタブを強制的に使用します。


window.openのクロムにブレークポイントが設定されている場合、ブラウザが新しいウィンドウを開くことに気づきました。コードが壊れないようにすると、代わりに新しいタブが開かれるようになります。
skinnybrit51 14

window.openと関数の結果が5/6/7秒程度かかる場合を除いて、これはOKの回避策です。関数が10秒かかるPDFを生成しているサーバーにデータを送信しているかどうかを検討してください。空のタブへのwindow.openは即座に行われ、ユーザーは空のタブに魔法のように表示されるまで10秒間凝視します。それでもiOSでは、それが唯一のソリューションです。
ケビンブラウン

13

あなたが使うなら window.open(url, '_blank')、Chrome、Firefoxなどでブロックされます(ポップアップブロッカー)。

これを試して、

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

このhttp://jsfiddle.net/safeeronline/70kdacL4/2/の jsフィドル

ajaxウィンドウのjsフィドルの動作http://jsfiddle.net/safeeronline/70kdacL4/1/


11

現時点では(Chrome 39)このコードを使用して新しいタブを開きます。

window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');

もちろん、これはChromeの将来のバージョンで変更される可能性があります。

ユーザーが使用しているブラウザを制御できない場合は、これを使用することはお勧めできません。将来のバージョンまたは異なる設定では機能しない可能性があります。


jfriend00のコメントに従って、ユーザーがブラウザーを構成する方法によって、コードではなく新しいウィンドウを開く方法が決まります。
Lee Taylor

私はあなたに同意します、あなたがあなたの環境を制御することができないならば、そのような解決策に頼ることは悪い考えであるということです。ただし、これが可能な状況もいくつかあります(たとえば、独自のポータブルChromeに同梱されているアプリケーションで使用しています)。これを明確にするために、私はanserを編集しました。
Nico Wiedemann

2
:不思議人のために、このコードスニペットを実行すると、このエラーのために動作しませんVM646 js:12 Blocked opening 'http://www.stackoverflow.com/' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
ベンジャミンCrouzier

6

これにより、リンクがChromeとFirefoxの新しいタブで開きます。テストしていないブラウザが増える可能性があります。

var popup  = $window.open("about:blank", "_blank"); // the about:blank is to please Chrome, and _blank to please Firefox
popup.location = 'newpage.html';

基本的には、新しい空のタブを開き、その空のタブの場所を設定します。ブラウザーのタブ/ウィンドウの動作は、実際にはブラウザーとユーザーのドメイン、責任、および選択であるため、これは一種のハッキングであることに注意してください。

2行目はコールバックで呼び出すことができますが(たとえば、AJAXリクエストを実行した後)、ブラウザーはそれをユーザー開始のクリックイベントとして認識せず、ポップアップをブロックすることがあります。


1
$windowAngularJSでのの使用方法にすぎませんwindowwindow代わりに単純に使用できます。詳細:docs.angularjs.org/api/ng/service/$window
Magne


0

このコードを使用して、新しいタブで開くことができます。

function openWindow( url )
{
  window.open(url, '_blank');
  window.focus();
}

私はstackoverflowからそれを得た..


1
これは機能しますが、ユーザークリックハンドラー内にいる場合のみです。それ以外の場合は、新しいウィンドウが開きます(ただし、少なくともユーザーが許可するまでFirefoxはブロックします)。
djsmith 2013

@djsmith、私はこれを使用しています。IE7でのみ問題に直面しています。他の解決策がある場合は、提案してください。ありがとうございます。
Dilip Rajkumar 2013

-2

私が使用する最良の方法:

1- HTMLへのリンクを追加します。

<a id="linkDynamic" target="_blank" href="#"></a>

2- JS関数を追加します。

function OpenNewTab(href)
{
    document.getElementById('linkDynamic').href = href;
    document.getElementById('linkDynamic').click();
}

3-必要なリンクでOpenNewTab関数を呼び出すだけ

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