javascriptのwindow.openにて、最近のブラウザにて新規タブで開きたいのに、新規ウィンドウで開いてしまうことがあり、ハマったので仕様をある程度まとめてみた。

先ず基本パターン

// 新規タブで開く
window.open('http://example.co.jp');

// サイズを指定すると新規ウィンドウで開く
window.open('http://example.co.jp', '_blank', 'width=800,height=600');

先ず最初の罠

// 新規タブで開く・・・？
$.ajax({
  type: 'POST',
  url: 'hoge',
  data: { hoge: 'fuga' }
}).done(function(jqXHR) {
  window.open('http://example.co.jp');
});

上記の場合、一見新規タブで開くように見えるが
実際は新規ウィンドウで開いてしまう。

どうやらAjax等コールバックで呼ぶ場合は、ユーザーからのフックと見做されないため強制的に新規ウィンドウとなってしまうようだ。
コレを解決するためにちょっと微妙だが下記のようなコードで対応した。

// ちゃんと新規タブで開く。が、しかし・・・
var childWindow = window.open('about:blank');
$.ajax({
  type: 'POST',
  url: 'hoge',
  data: { hoge: 'fuga' }
}).done(function(jqXHR) {
  childWindow.location.href = 'http://example.co.jp';
}).fail(function(jqXHR) {
  childWindow.close();
});

一旦about:blankで新規タブを作っておき、そこのlocationを変更させた。

ただ、こうした場合関連でヘンな事象が・・・

何故か、親ウィンドウを閉じると子ウィンドウを道連れにして閉じてしまう。別タブで開いているのに・・・

そのため、下記の対応をとった。

// 道連れにしない。 OK
var childWindow = window.open('about:blank');
$.ajax({
  type: 'POST',
  url: 'hoge',
  data: { hoge: 'fuga' }
}).done(function(jqXHR) {
  childWindow.location.href = 'http://example.co.jp';
  childWindow = null;
}).fail(function(jqXHR) {
  childWindow.close();
  childWindow = null;
});

上記のように、新規タブのオブジェクトにnullを設定することによって、ちゃんと子ウィンドウを道連れにしなくてすむようになった。

ちなみに、 はじめに

childWindow.opener = null; や、childWindow.parent = null; また、 delete childWindow としてみたものの、どちらもうまく行かなかったので、
きちんとchildWindow = null; で空にしておくことが大事っぽい。