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とは、ウィンドウにフォーカスを合わせる関数です。
サブウィンドウにフォーカスする
下記のデモページで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();
});
ブラウザ名 | 動作可否 | サブウィンドウ |
---|---|---|
Google Chrome | ○ | フォーカスされる |
Mozilla Firefox | ○ | フォーカスされる |
Microsoft Edge | ○ | フォーカスされる |
Microsoft Internet Explorer | ○ | フォーカスされる |
####メインウィンドウにフォーカスする
サブウィンドウを最前面に表示することは、どのブラウザでも動作します。しかし、メインウィンドウを最前面にするとブラウザ毎に挙動が異なります。
メインウィンドウに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ではメインウィンドウが最前面に表示されません。
ブラウザ名 | 動作可否 | メインウィンドウ |
---|---|---|
Google Chrome | × | フォーカスされない |
Mozilla Firefox | × | フォーカスされない |
Microsoft Edge | ○ | フォーカスされる |
Microsoft Internet Explorer | ○ | フォーカスされる |