IE8 アクティブタブの取得

質問

------------------------------------------------------
WIN8.1の IE11で、IE8をエミュレートして開発しています。
------------------------------------------------------

現在IEウィンドウタブのアクティブ/非アクティブ状態を取得したいと思い、以下のようにイベントに関数を仕込んでいます。
-----------------------------
window.onfocus = function () { focusChg(true); }
window.onblur = function () { focusChg(false); }

function focusChg(flg) {
document.title = (flg) ? "あ" : "い";
document.title += formatDate(new Date(), 'hh:mm:ss.SSS');
}

※補足
function formatDate() は日時の書式を整える関数
-----------------------------

※タブブラウザですので、タブで複数のページを表示した場合（パターン1）
「タブページA　⇔　タブページB」と切り替えた場合
※または（パターン2）
「タブページA　⇔　エクスプローラ等の別アプリケーション」へ切り替えた場合
に、仕込みのイベントが発生する予定でした。

ところが

ページ内には「input/a/div」等が存在していいるのですが、
そのページ内のinput等にフォーカスを当てると、その親windowのonblurが発生しています。
同一WIndowのhtml→body→form→input
へのフォーカス移動では、onblurが発生しない想定で考えていたので、困ってしまいました。

どなたかアクティブタブの取得方法や、またその切替を行ったタイミングのイベントの取得方法を教えてください。

最終目標は、、、
5分おきにDBへの問い合わせを行う非同期リクエストを、タブがカレントの時だけ行いたい。
またアクティブではない時に5分のタイミングがやってきた場合は、内部フラグだけを立てておき、アクティブになった瞬間に問い合わせを行う非同期リクエストの処理を呼び出したい。
という事をしようとしております。
非同期リクエストは出来ておりますが、これらの呼び出すタイミングがうまくいかないような状態です。

よろしくお願いいたします。

回答No.1

think49 · ベストアンサー

blur は DOM L2 Events ではバブルしないイベントですが、IE8 ではバブルしているんですかね…。
http://www.y-adagio.com/public/standards/tr_dom2_events/events.html#Events-eventgroupings-htmlevents-h3

event.srcElement の値はどうなっていますか？
event.srcElement の値から処理を分岐できませんか？

# Re: 1050YENさん

お礼

think49さん
早速の回答、ありがとうございます。

window.onfocus/window.onblur
共にevent.srcElementはnullを返すようですね。。。

しかし回答から
全Elementに対してのonfocus/onblurイベントを、jQueryを利用したセレクタ指定のハンドリングするとかしか方法がないのかな？
と方法を思いつきました。

が、、、
あまりやりたくない方法ではあります。。。

でもそれしかない？？？

うーん、、、
悩ましいところです。

回答No.4

think49

#1,2,3 です。

> windowのonfocus/onblurのイベントでは、fromElementもtoElementもやはり値が入ってないようですね。
そうでしたか。
となると、私にはスマートな解決策を思いつきません。お力にならず、申し訳ありません。

> //* @remarks：イベント関連付け停止
ご存知ならいいのですが、event.preventDefault(); はデフォルトアクションの抑止、event.stopPropagation(); はバブリングの停止であり、両者は別物です。
デフォルトアクションの抑止の為に両コードをまとめて指定する方をたまに見かけるので念のため。

> 全てのElementにイベントを個々にレガシーなJavaScriptで仕込みを入れるのは、メンテナンス面からも現実的ではないため、イベントハンドラの登録はjQueryが好ましいように思いますがいかがでしょう？
余計なものを入れないシンプルなコードで検証した方がいいので先程は jQuery を推奨しませんでしたが、実際の運用で jQuery を使うのは問題ないと思います。

# Re: 1050YENさん

お礼

think49さん
毎度、ありがとうございます。m(_ _)m

>私にはスマートな解決策を思いつきません。お力にならず、申し訳ありません。
いえいえ！全くそんな事無いです。

質問をする事で、「ズバッとの答え」をいただくだけが回答だと思っておりません。
またこちらで調査していた事と同様の回答を得られた場合にあっても、結果としてそれは
「逆にそれしか方法がない」
という事になると思います。

ですので
-----------------------------------------------
think49さんが「解決策を思いつきません」と発言し
→→【それにレスが付かない事】
-----------------------------------------------
がある意味その状態が回答なんだと思います。

それと補足でいただいた「イベント関連付け停止」については、すいません。Common系のjsソースのコピペの範囲を誤り、デッドコードの部分まで張り付けてしまったようです。
使っていない関数ですのでご安心を(^^;)

ありがとうございました。

回答No.3

think49

#1,2 です。

event.srcElement が使えなかったとしても、event.fromElement, event.toElement 辺りは使えないでしょうか。
jQuery を使っているようですが、jQuery は event オブジェクトを独自操作していはずなので素の JavaScript で試してみて下さい。

---
function handleBlur (event) {
var target = event.target || event.srcElement;

console.log(event.type);
console.log(target);
console.log(event.fromElement);
console.log(event.toElement);
}

function handleFocus (event) {
var target = event.target || event.srcElement;

console.log(event.type);
console.log(target);
console.log(event.fromElement);
console.log(event.toElement);
}

attachEvent('onfocus', handleFocus);
attachEvent('onblur', handleBlur);
---

お礼

think49さん
幾度もの回答、ありがとうございます。m(_ _)m

#2の補足前にお礼で書いたはずの内容が、、、
どうやら「確認」後の「確定」をせずにブラウザを閉じてしまったようです。

すいません。ここにその内容も継ぎ足して書きます。

#1のサンプル実行や質問前には、よく巷にあるブラウザ対応を考慮した関数を用意してあるので、それに準拠したハンドラ登録を行っています。
勿論IE8の時は「attachEvent」を必然的に利用するようになっています。

質問で書いてある通り、当方の環境はIE11を利用したIE8のエミュレートですので、以下のようなイベントレジスタ関数を利用する手法を取っています。
-----------------------
//*
//* @name ：addEvent
//* @remarks：イベント関連付け設定
//*
var addEvent = (document.addEventListener) ?
function (elem, type, listener) { elem.addEventListener(type, listener, false); } :
function (elem, type, listener) { elem.attachEvent("on" + type, listener); };

//*
//* @name ：stopEvent
//* @remarks：イベント関連付け停止
//*
var stopEvent = function (event) {
if (event.stopPropagation) {
event.stopPropagation();
event.preventDefault();
} else {
event.returnValue = false;
event.cancelBubble = true;
}
return false;
};

//*
//* @name ：removeEvent
//* @remarks：イベント関連付け解除
//*
var removeEvent = (document.addEventListener) ?
function (elem, type, listener) { elem.removeEventListener(type, listener, false); } :
function (elem, type, listener) { elem.detachEvent("on" + type, listener); };
-----------------------

#2の補足で書いた内容は、#2までにいただいた内容を確認して、通常のJavaScriptで試した内容をお伝えしております。

さらに#3で書いてある内容を試しました。
windowのonfocus/onblurのイベントでは、fromElementもtoElementもやはり値が入ってないようですね。

折角何度も回答をいただいておりますが、、、
ブラウザ内のElementにフォーカスが移動すると、やはりWindowのblurが起動してしまい、現在アクティブWindowかどうかの判定は、この手法では厳しいように思います。

全てのElementにイベントを個々にレガシーなJavaScriptで仕込みを入れるのは、メンテナンス面からも現実的ではないため、イベントハンドラの登録はjQueryが好ましいように思いますがいかがでしょう？

回答No.2

think49

#1 です。

確認ですが、attachEvent を使用している前提で合っているでしょうか。
(質問文にあるコード window.onblur では第一引数で event オブジェクトを取れなかったと記憶しているので、念のため)

---
function handleBlur (event) {
console.log(event.srcElement);
}

function handleFocus (event) {
console.log(event.srcElement);
}

function init () {
attachEvent('onblur', handleBlur);
attachEvent('onfocus', handleFocus);
}
---

上記コードでも対応できないなら、label, input, select, textarea, button, *[tabindex] な要素をフックして判定させるぐらいしか思いつきません。

# Re: 1050YENさん

補足

ググってみると
「visibilitychangeイベント」
というのを知りました。
https://developer.mozilla.org/ja/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API
https://w3g.jp/blog/ie_supportlist
（最初からもっと調べてから質問しろという突っ込みは無しで^^;）

IE10から対応になっていいうようですね。。。
ってことは、、、
それ以下のブラウザでは、先ほどお伝えした泥臭いやり方しか無いという事だと判断しました。

↓このような感じ
$("*").blur(ハンドラ);
$("*").focus(ハンドラ);
で、とりあえずは作成していきます。

こちらが「早とちりで決断している」という薄い期待を込めて、もう少し締め切らないで待ってみたいと思います。