• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:IE8 アクティブタブの取得)

IE8 アクティブタブの取得方法と非同期リクエストのタイミング

このQ&Aのポイント
  • WIN8.1のIE11でIE8をエミュレートして開発しています。現在IEウィンドウタブのアクティブ/非アクティブ状態を取得したいと思います。タブブラウザで複数のページを表示して切り替えた場合に、仕込んだイベントが発生する予定ですが、同一ウィンドウ内でのフォーカス移動でもonblurが発生しています。
  • アクティブタブの取得方法や、タイミングのイベントの取得方法を教えてください。
  • 最終目標は、カレントのタブのみ非同期リクエストを行い、非アクティブ時には内部フラグのみ更新し、アクティブになった瞬間に非同期リクエストの処理を呼び出すことです。

質問者が選んだベストアンサー

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.1

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さん

1050YEN
質問者

お礼

think49さん 早速の回答、ありがとうございます。 window.onfocus/window.onblur 共にevent.srcElementはnullを返すようですね。。。 しかし回答から 全Elementに対してのonfocus/onblurイベントを、jQueryを利用したセレクタ指定のハンドリングするとかしか方法がないのかな? と方法を思いつきました。 が、、、 あまりやりたくない方法ではあります。。。 でもそれしかない??? うーん、、、 悩ましいところです。

その他の回答 (3)

  • think49
  • ベストアンサー率59% (285/482)
回答No.4

#1,2,3 です。 > windowのonfocus/onblurのイベントでは、fromElementもtoElementもやはり値が入ってないようですね。 そうでしたか。 となると、私にはスマートな解決策を思いつきません。お力にならず、申し訳ありません。 > //* @remarks:イベント関連付け停止 ご存知ならいいのですが、event.preventDefault(); はデフォルトアクションの抑止、event.stopPropagation(); はバブリングの停止であり、両者は別物です。 デフォルトアクションの抑止の為に両コードをまとめて指定する方をたまに見かけるので念のため。 > 全てのElementにイベントを個々にレガシーなJavaScriptで仕込みを入れるのは、メンテナンス面からも現実的ではないため、イベントハンドラの登録はjQueryが好ましいように思いますがいかがでしょう? 余計なものを入れないシンプルなコードで検証した方がいいので先程は jQuery を推奨しませんでしたが、実際の運用で jQuery を使うのは問題ないと思います。 # Re: 1050YENさん

1050YEN
質問者

お礼

think49さん 毎度、ありがとうございます。m(_ _)m >私にはスマートな解決策を思いつきません。お力にならず、申し訳ありません。 いえいえ!全くそんな事無いです。 質問をする事で、「ズバッとの答え」をいただくだけが回答だと思っておりません。 またこちらで調査していた事と同様の回答を得られた場合にあっても、結果としてそれは 「逆にそれしか方法がない」 という事になると思います。 ですので ----------------------------------------------- think49さんが「解決策を思いつきません」と発言し →→【それにレスが付かない事】 ----------------------------------------------- がある意味その状態が回答なんだと思います。 それと補足でいただいた「イベント関連付け停止」については、すいません。Common系のjsソースのコピペの範囲を誤り、デッドコードの部分まで張り付けてしまったようです。 使っていない関数ですのでご安心を(^^;) ありがとうございました。

  • think49
  • ベストアンサー率59% (285/482)
回答No.3

#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); ---

1050YEN
質問者

お礼

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が好ましいように思いますがいかがでしょう?

  • think49
  • ベストアンサー率59% (285/482)
回答No.2

#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さん

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(ハンドラ); で、とりあえずは作成していきます。 こちらが「早とちりで決断している」という薄い期待を込めて、もう少し締め切らないで待ってみたいと思います。

関連するQ&A

専門家に質問してみよう