Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

JavaScriptのwindow.focusについて紹介します。(2018年11月現在)

動作環境
OS: Windows 10 Pro
Google Chrome: 70.0.3538.110
Mozilla Firefox: 63.0.3
Microsoft Edge: 42.17134.1.0
Microsoft Internet Explorer: 11.407.17134.0

window.focusとは

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

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

サブウィンドウにフォーカスする

下記のデモページでwindow.focusを実行することができます。
デモはこちら
ソースファイルはこちら

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

index.js
$('#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();
});
ブラウザ名 動作可否 サブウィンドウ
Google Chrome フォーカスされる
Mozilla Firefox フォーカスされる
Microsoft Edge フォーカスされる
Microsoft Internet Explorer フォーカスされる

メインウィンドウにフォーカスする

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

以下のデモページを表示してみてください。
デモはこちら
ソースファイルはこちら

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

index.js
$('#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ではメインウィンドウが最前面に表示されません。

ブラウザ名 動作可否 メインウィンドウ
Google Chrome × フォーカスされない
Mozilla Firefox × フォーカスされない
Microsoft Edge フォーカスされる
Microsoft Internet Explorer フォーカスされる

引用

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away