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

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

ただいまの
回答率

90.49%

  • JavaScript

    16930questions

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

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

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 5,347

sakusa

score 10

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+1

・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 20:55

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

    キャンセル

checkベストアンサー

0

location = '../test.html';

このコードが実行されるとページが遷移されてJavaScriptの機能も初期化されるので setInterval の2回目の処理は実行されない為、実質的には setTimeout を実行した事と変わらない動作になっています。

ちなみに再度focusした時に途中の5秒からスタートしたい場合はsetInterval()を変更するということでよろしいでしょうか?

5秒間 focus 継続後、blur して再度、focus した場合に5秒後から継続したい場合は継続病数を記録しておく必要があります。

<p><span id="delay-time">10</span>秒後に<a id="redirect-uri" href="../test.html">http://example.com/test.html</a>へ遷移します。</p>
<script type="text/javascript">
'use strict';
(function () {
  var intervalId;

  function handleInterval () {
    var doc = this.document,
        textNode = doc.getElementById('delay-time').firstChild,
        delayTime = textNode.data = --textNode.data;

    if (delayTime < 1) {
      location.href = doc.getElementById('redirect-uri').href;
    }
  }

  function handleFocus (event) {
    intervalId = event.currentTarget.setInterval(handleInterval, 1000);
  }

  function handleBlur (event) {
    event.currentTarget.clearInterval(intervalId);
  }

  function main () {
    this.addEventListener('focus', handleFocus, false);
    this.addEventListener('blur', handleBlur, false);
    handleFocus.call(this, {currentTarget: this});
  }

  main.call(this);
}.call(this));
</script>

Re: sakusa さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/07 16:36

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

    キャンセル

0

var intervalId;
window.onfocus = function () {
  intervalId = setInterval(function() {
    location.reload();
  }, 10000);
}

window.onblur = function() {
  clearInterval(intervalId);
}

見た感じ、focusがあたるたびに10秒を数え直していいっぽいので、こうしてますが、
blurした時に5秒たっていた、再度fucusした時に5秒からスタートとしたいのであれば
これじゃダメです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/05 20:58

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

    キャンセル

  • 2016/04/05 23:45

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

    キャンセル

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/06 03:22

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

    キャンセル

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16930questions

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