皆さん、こんにちは。
JavaScriptでウィンドウがフォーカスされている時に10秒ごとにページを読み込みこませたく悪戦苦闘しております。
window.focus(); if (window.onfocus) { var interval = setInterval("window.onfocus()", 10000); window.onfocus = function() { setInterval(function() { location = '../test.html'; alert("focus"); }, 10000) } } else { window.onblur = function () { clearInterval(interval); alert("blur"); window.onblur = ''; } }
なるべくif文で解決したいのですが、うまくいきません。
フォーカスを外れた時のblurというアラートが出て、それ以降は出ません。。。
どうかお力をお貸しください。何卒よろしくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
・onfocus, onblurでフラグ切り替えのみ実行
・setIntervalではフラグのON/OFFを見て処理実行判断するfunctionを実行
という具合に整理してやるとこんな感じ。
var needsReload = true; window.onfocus=function(){ needsReload = true; } window.onblur=function(){ needsReload = false; } var interval = setInterval(function(){ if(needsReload){ // 読み込み処理:記述省略 } }, 10000);
投稿2016/04/05 06:31
総合スコア5572
0
onblur/onfocusでは、別のウィンドウがアクティブになってブラウザウィンドウからフォーカスが外れたときに、ページが隠れたとみなされない気がします。
もしかしたら、それは隠れたと判断したくないのであれば別ですが。
Page Visibility API で表示されているかを判断すれば良いのではないでしょうか?
https://developer.mozilla.org/ja/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API
こんなイメージで、タイミングはざっくりになりますが、フラグも不要になるのではないだろうか。
var interval = setInterval(function(){
if(document.visibilityState == 'visible'){
// 読み込み処理:記述省略
}
}, 10000);
投稿2016/04/05 17:16
総合スコア26
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
ベストアンサー
location = '../test.html';
このコードが実行されるとページが遷移されてJavaScriptの機能も初期化されるので setInterval
の2回目の処理は実行されない為、実質的には setTimeout
を実行した事と変わらない動作になっています。
ちなみに再度focusした時に途中の5秒からスタートしたい場合はsetInterval()を変更するということでよろしいでしょうか?
5秒間 focus
継続後、blur
して再度、focus
した場合に5秒後から継続したい場合は継続病数を記録しておく必要があります。
HTML
1<p><span id="delay-time">10</span>秒後に<a id="redirect-uri" href="../test.html">http://example.com/test.html</a>へ遷移します。</p> 2<script type="text/javascript"> 3'use strict'; 4(function () { 5 var intervalId; 6 7 function handleInterval () { 8 var doc = this.document, 9 textNode = doc.getElementById('delay-time').firstChild, 10 delayTime = textNode.data = --textNode.data; 11 12 if (delayTime < 1) { 13 location.href = doc.getElementById('redirect-uri').href; 14 } 15 } 16 17 function handleFocus (event) { 18 intervalId = event.currentTarget.setInterval(handleInterval, 1000); 19 } 20 21 function handleBlur (event) { 22 event.currentTarget.clearInterval(intervalId); 23 } 24 25 function main () { 26 this.addEventListener('focus', handleFocus, false); 27 this.addEventListener('blur', handleBlur, false); 28 handleFocus.call(this, {currentTarget: this}); 29 } 30 31 main.call(this); 32}.call(this)); 33</script>
Re: sakusa さん
投稿2016/04/05 15:37
総合スコア18156
0
javascript
1var intervalId; 2window.onfocus = function () { 3 intervalId = setInterval(function() { 4 location.reload(); 5 }, 10000); 6} 7 8window.onblur = function() { 9 clearInterval(intervalId); 10}
見た感じ、focusがあたるたびに10秒を数え直していいっぽいので、こうしてますが、
blurした時に5秒たっていた、再度fucusした時に5秒からスタートとしたいのであれば
これじゃダメです。
投稿2016/04/05 06:47
総合スコア4666
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/05 11:55