[Javascript] 最新ブラウザではwindow.focusが動かない

こんにちは！パーク社員のゆんぼうです。

Webアプリ開発のクロスブラウザ対応したときに注意したいことを紹介します。

今回は、Javascriptの「window.focus」関数についてです。

動作確認した環境

OS: Windows 10 Pro

ブラウザ名	バージョン
Google Chrome	62.0.3202.94
Mozilla Firefox	57.0
Microsoft Edge	41.16299.15.0
Microsoft Internet Explorer (IE11)	11.64.16229.0

window.focusとは

window.focusとは、ウィンドウにフォーカスを合わせる関数です。

https://developer.mozilla.org/ja/docs/Web/API/Window/focus

下記のデモページでwindow.focusを実行することができます。

【デモはこちら】

【ソースファイルはこちら】

「window.open」ボタンを押下してみてください。サブウィンドウが生成されます。サブウィンドウをメインウィンドウの背面に隠してみてください。その状態で「subwindow focus」ボタンを押下すると、サブウィンドウに対してwindow.focusが実行されて、サブウィンドウが最前面に表示されます。ソースコードは以下の通りです。

$('#openWindButton').on('click', function () {
    var option ='left=100,top=100,width=500,height=200,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no';
    log('window.open option: ' + option);
    winObj = window.open('sub_window.html', 'windowName1', option);
});

$('#focusButton').on('click', function () {
    winObj.focus();
});

サブウィンドウを最前面に表示することは、どのブラウザでも動作します。しかし、メインウィンドウを最前面にするとブラウザ毎に挙動が異なります。

メインウィンドウのwindow.focus

メインウィンドウにwindow.focusしてみましょう。

以下のデモページを表示してみてください。

【デモはこちら】

【ソースファイルはこちら】

「window.open」ボタンを押してみてください。サブウィンドウが表示されます。サブウィンドウを最前面表示している状態で、5秒間待つと、メインウィンドウに対してwindow.focusが実行されて、メインウィンドウが最前面に表示されます。ソースコードは以下の通りです。

$('#openWindButton').on('click', function () {
    var option ='left=100,top=100,width=500,height=200,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no';
    log('window.open option: ' + option);
    window.open('sub_window.html', 'windowName1', option);
});

var updateTimer = function() {
    updateTask = setTimeout(function () {
        window.focus();
        log("window.focus");
        updateTimer();	
    }, 5000);
}

updateTimer();

しかし、ChromeとFirefoxではメインウィンドウが最前面に表示されません。

ブラウザ毎のwindow.focusの挙動

クロスブラウザ対応で注意したいこととして、ChromeとFirefoxのwindow.focusの挙動が異なります。

ブラウザ名	サブウィンドウにwindow.focus	メインウィンドウにwindow.focus
Google Chrome	○: フォーカスされる	×: フォーカスされない
Mozilla Firefox	○: フォーカスされる	×: フォーカスされない
Microsoft Edge	○: フォーカスされる	○: フォーカスされる
Microsoft Internet Explorer (IE11)	○: フォーカスされる	○: フォーカスされる

以上です。