ステップ

javascript window.focusが効かない場合の対策

xiyuan

javascript window.focus 効かない、ほかの実現方法

window.focusが効かない場合の対策を紹介したいと思います。

要件

・印刷機能で、全ての帳票を同一のウインドウ（タブ）で出力し、フォーカス(focus)すること

実現方法その１：ChromeはOK

1
2
3
4
5
6
7
8
9
10
 
 
$("#print").on("click", function() {
 
var sub_win = window.open("帳票出力URL", "_pdf");
sub_win.focus();
 
});
 
 

上記の実装は、昔のブラウザなら、問題なく、正常に動いていましたが、最近のメジャーブラウザは、window.focusをサポートしないため、実行すると、window.focusの部分は全く効かない、javascriptエラーが発生してしまいました。（２０１９年7月１７現時点で、Chromeが問題なく、動いている）
企業社内WebアプリケーションシステムはIEを使っているケースが圧倒的に多いため、この方法では、今の時代はもう使えません。

実現方法その２：ほぼOK

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
var sub_win; // グローバル変数宣言
 
$("#print").on("click", function() {
 
if( sub_win === undefined){
sub_win = window.open("帳票出力URL", "_pdf"); //1回目：新しいウィンドウ（タブ）を開く、初回なので、自動的フォーカスされる
}else{
sub_win.close();
sub_win = window.open("帳票出力URL", "_pdf"); //2回目以降：対象ウィンドウ（タブ）が既に存在した場合、クローズしてから、ウィンドウ（タブ）を開く。（クローズしないで開くと、フォーカスされない場合がある）
}
});
 
 

上記の実装は、最近のメジャーブラウザでは、正常に動いていますが、IE(Edgeも？)ではたまに、フォーカスされない場合があるので、この方法は、社内システムに向いていないですね。

実現方法その３：EdgeはNG

1
2
3
4
5
6
7
8
9
10
11
 
 
$("#print").on("click", function() {
 
window.open("about:blank", "_pdf").close();
window.open("帳票出力URL", "_pdf");
});
 
 

この実現方法は、すごくシンプルで、筆者が大好きですが、なぜかEdgeは、10回に1回くらい、新しいウィンドウを開けなかったり、javascriptエラー(SCRIPT16386：インターフェイスがサポートされていません)が発生したり、しましたので、Edgeサポートも必要のシステムにおいて、この方法は使いません。

実現方法その４：OKですが、微妙

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
$("#print").on("click", function() {
 
    var sub_win = window.open("about:blank", "_pdf");  
setTimeout(
function () {
if( !sub_win.closed ){
sub_win.close();
window.open("帳票出力URL", "_pdf");
}
},
"800"
);
});
 
 

実現方法その３の対策版です。実現方法その３は、非同期処理の原因で、処理のスピードによって、たまに不具合が発生するのではないかと考えて、setTimeoutを入れて、0.8秒を待った後に、次の処理を行うことを試したら、Edgeで50回くらい印刷しても、問題なく、動作しました。
Timeout時間は0.8にしろか、1秒にしろか、皆さんのご自身に調整してみてください。（筆者の場合、最初0.5秒にしましたが、また同じ不具合が発生しましたため、0.8秒にしました。）

まとめ

いかがでしょうか。javascriptでwindow.focusが効かない場合、ほかの実現方法をご理解されたでしょうか。４つの実現方法をここに挙げましたが、もっといい方法はまだあるはずと思います。例えば、Promise。皆さんに完璧な実現方法があれば、是非筆者にご連絡ください。