質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

15727閲覧

ウィンドウがフォーカスされている時にページを定期的に読み込みたい

sakusa

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

0クリップ

投稿2016/04/05 06:13

皆さん、こんにちは。
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というアラートが出て、それ以降は出ません。。。
どうかお力をお貸しください。何卒よろしくお願いいたします。

smock👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

tkturbo

総合スコア5572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakusa

2016/04/05 11:55

tktuboさん、お早いご回答ありがとうございました。 わたしのコードと比べると洗練されていてとても勉強になりました。 ありがとうございました^^。
guest

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

harufumi.abe

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2016/04/05 18:22

blurは別のウインドウがアクティブになれば期待通りに動作します。 Page Visibility APIとの違いはブラウザを画面左半分に立ち上げて右半分に立ち上げていたテキストエディタをアクティブにした際の挙動ですね。 - blur は focusが外れたのでタイマーを停止する - visibilityState は画面が隠れていないのでタイマーを停止しない ちなみに、setIntervalで visibilityState を監視する方法だと画面が隠れてもバックグラウンドでタイマー処理が動作し続けるので document.addEventListener('visibilitychange', handleVisibilitychange, false); でタイマー処理を停止させる方法がお勧めです(私の環境では期待通りに動作しました)。 また、Page Visibility API は IE9- で動作しないので動作保証するサポートブラウザに注意する必要があります。
guest

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

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakusa

2016/04/07 07:36

think49さん、お返事が遅くなり申し訳ございません。。 コードを読み解くことに時間がかかっていまいました。 addEventlisterを使用してfocus,blurを判断するのですね。私にはとても思いつかなくて、頭が下がるばかりです<(_ _)> ありがとうございました!!
guest

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

root_jp

総合スコア4666

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakusa

2016/04/05 11:58

root_jpさん、ご回答いただきありがとうございました。 お二方のおかげで何とか解決することができました。 ちなみに再度focusした時に途中の5秒からスタートしたい場合はsetInterval()を変更するということでよろしいでしょうか?
root_jp

2016/04/05 14:45

途中から再開は少し面倒臭いかもしれませんね。 できないことはないと思いますが、パッとスマートな考えが思いつきませんw すみません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問