javascriptを変更することでhtmlの更新時刻をコントロールしたいのですが…

Question

実現したいこと

初心者です。

現在エクセルで作成したhtmlファイルをデジタルサイネージに使用することを画策しております。
javascriptを使ってhtmlの内容を定期的（例えば10秒間隔）に更新したいのですが、更新時の画面のちらつき（一瞬白くなる）が気になっています。
画面のちらつきを解消させたかったのですが、方々調べて手を尽くしてはみたもののうまくいかず、最終的に更新の頻度を下げればよい（ちらつきはそのまま）という結論に至りました。

結果、

javascriptの更新時刻を変更（vba） → 更新時刻にhtml更新（自動） → javascriptの更新時刻を変更（vba） → 更新時刻にhtml更新（自動） → …

という流れを実現させたいです。

発生している問題・分からないこと

javascriptの更新時刻（下記ご参照ください）を更新し続けても、それに連動する形でhtmlを更新することはできないようで困っております（おそらくそういう仕様なのだと思いますが）。

上記を可能にするにはどのような仕組みを導入すれば宜しいでしょうか。お知恵をお借りしたく投稿致しました。宜しくお願い致します。

以下、javascript本文 -----

該当のソースコード

window.onload = function()
{
var nowTime = new Date();
var targetTime = new Date("2024/03/19 19:53:30"); //←更新時刻（これを適宜変更）
var refreshTime = targetTime.getTime() - nowTime.getTime();
if(refreshTime>0) {
setTimeout(function(){location.reload(true)},refreshTime);
}
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

最初にhtmlが読み込んだjavasctiptに記載されている時刻ではちゃんと更新（refresh）されました（たぶん、それ以降はjavascriptのみに変更を加えてもhtml側がそれを読んでくれないのだと思います）。

補足

特になし

Comments

[退会済みユーザー]

ページのリロードではなくhtml内の時刻だけ書き換える。

[PONCHIMAN]

コメントありがとうございます。
調べてみます。
また分からないことがあれば質問させてください。

[yambejp]

javascriptの更新時刻を変更（vba）
の部分はどうやっているのか提示ください

なおエクセルから処理をするような特殊なことをページをしていなくても
リロードすればちらつくものだと思いますが

[PONCHIMAN]

アドバイスありがとうございます。

javascriptは外部ファイルにしてvbaで時刻部分も含めて全て書き換えています。やり方は下記のような感じです。
リロードで画面がチラつくのは仕方ないと認識しています。不要なリロードを極力排除するような仕組みに出来ればと考えております。

Open "C:reload.js" For Output As #1

for I = 1 to 全行数

Print #1, （外部javascriptファイルの1行分）

next

Close #1

[Lhankor_Mhy]

⓪　更新時刻が0:00に設定されている
①　javascriptの更新時刻を1:00に変更（vba）
②　⓪で設定された通り0:00にhtml更新（自動）、①で設定されたjavascriptを読み込む
③　javascriptの更新時刻を2:00に変更（vba）
④　①で設定された通り1:00にhtml更新（自動）、③で設定されたjavascriptを読み込む

という流れかと理解しましたが、これで合っていますか？

[PONCHIMAN]

いろいろ考えた結果、質問に書いた仕組みは諦めることにしました。
まだまだ知識が不足していることもありますので、もう少し勉強してから再挑戦したいと思います。
今回は考える良い機会になりました。ありがとうございました。

Answer 1

Lhankor_Mhyさんのコメントと同じ感じであれば実装可能だと思います。
というかローカル環境のみですが出来ました。（Excelは使っていませんが）

window.setInterval(関数, 実行間隔)と言う関数があり、引数の実行間隔秒毎に引数の関数を実行してくれます。
この引数の中の関数に質問のような関数を入れたらよいと思います。

以下の例では5秒毎にtimeoutFuncが実行されます。（内容は質問のものと同じ）
ローカル環境でこのjsを実行するhtmlファイルを開きつつメモ帳で更新時刻を書き換えたところ、正常に作動しました。
実行間隔の時間（intervalTime）はメモ帳の書き換えを認知する頻度なので5分の間に何度も書き換える場合はこのままでいいと思いますが、数時間に1度くらいの頻度ならば20分くらいでもいいと思います。
つまり
（現在時刻＋intervalTime）＞更新時刻
だと更新されないということです。

// 実行間隔
const intervalTime = 5000;// 5秒間隔

function reloadFunc () {
  location.reload(true);
}

function timeoutFunc() {
  const targetTime = "2024/03/25 06:49:35"; //←更新時刻（これを適宜変更）
  const nowTime = new Date();
  const target = new Date(targetTime);
  const refreshTime = target.getTime() - nowTime.getTime();
  if (refreshTime > 0) {// 更新時刻が過去でない時
    setTimeout(reloadFunc, refreshTime);
  }
}

window.setInterval(timeoutFunc, intervalTime);

Comments

[PONCHIMAN]

ご回答ありがとうございます。
実際にソースまでご提案いただいて大変感謝しています。
私の方でも試してみましたが、おそらく何かが悪さをしているせいでうまく動作しませんでした。
javascriptについて知らなすぎるのもあると思いますので、もう少し勉強してからまた試してみたいと思います。