webページの自動更新を、ちらつきがおこらないよう行いたい

実現したいこと

iframeを使って定期的にリフレッシュしている画面において、リロードのちらつきが起こらないように更新を反映したい。

前提

エクセルVBAを使って、エクセルシートに入力した／削除した内容のHTML出力を行い、
自動更新を行うwebページからiframeでそれを呼び出すことによって、サイネージに表示している画面を自動的に更新するファイルを作成しました。

発生している問題・エラーメッセージ

あまり反映に時間がかかると意味がないため、10～15秒間隔で自動更新するようにしています。
するとどうしても更新の際に画面がちらついてしまいます。
このちらつきをなくす方法はないものでしょうか。

該当のソースコード

HTML
1<html>
2<head>
3<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
4<meta http-equiv="content-style-type! content="text/css">
5<TITLE></TITLE>
6<script>
7setTimeout(function () {
8location.reload(false);
9}, 10000);
10</script>
11<STYLE>
12html,body{
13	overflow:hidden;}
14body{
15	position:fixed;
16	width:100%;
17	height:100%;}
18</STYLE>
19</head>
20<body><iframe src="" width="110%" height="110%" frameborder="0" scrolling="no"></iframe></body>
21</html>

試したこと

過去の質問で
・iframeを二つ用意してopacityでクロスフェードさせ、バックグラウンドで更新をかけることによって表面上ちらつきが発生しない
という手法を目にしました。

該当のソースコード

HTML
1<html>
2<head>
3<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
4<meta http-equiv="content-style-type! content="text/css">
5<TITLE></TITLE>
6<script>
7"use strict";
8window.onload = e => {
9	(function reload(){
10		document.querySelector(".off").contentWindow.location.reload(true);
11		setTimeout(reload, 3000);
12	})();
13	const iframes = [].slice.call(document.querySelectorAll("iframe"));
14	window.swap = e => 
15		iframes.forEach(iframe => iframe.className = iframe.className == "on" ? "off" : "on");
16</script>
17<STYLE>
18body{
19	margin: 0;
20}
21iframe{
22	position: absolute;
23	width: 100%;
24	height: 100%;	
25	border: none;
26	transition: opacity 2s linear 0s;
27}
28iframe.on{
29	opacity: 1;
30	z-index: 1;
31}
32iframe.off{
33	opacity: 0;
34	z-index: 0;
35}
36</STYLE>
37</head>
38<body>
39<iframe class="on" src="" scrolling="no" onload="swap()"></iframe>
40<iframe class="off" src="" scrolling="no"  onload="swap()"></iframe>
41</body>
42</html>

ただ書かれていたようにHTMLを修正してもうまく更新・反映されません。
該当ページの動作サンプルで実際の仕様を確認しようにも消えておりました。
どうかお力を貸していただけないでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

試したことに記載されている2つのiframe要素を使った方法を考えてみます。

まず、Windows.loadイベントで「画像やCSSなどのリソースが全て読み込み終わったタイミング」で何らかの処理を行うことができます。これはiframe要素の中身のロード完了に対しても仕掛けることが可能です。
画面のちらつきを防ぐため、完全にページが読み込み終わったタイミングで表示されるiframeを入れ替えるようにします。

https://developer.mozilla.org/ja/docs/Web/API/Window/load_event

最初は2つのiframeのうち片方を表示、もう片方を非表示にするようCSSで調整します。今回は visibilityプロパティを使いましょう。

非表示になっている側のiframeをリロードします。この際、iframeの内容をリロードするためには元のhtmlファイルとiframeで読み込むhtmlファイルが同一オリジンであることが必要条件です。
リロードが完了したら上記のloadイベントが発動します。このイベントハンドラの中で、

2つのiframeの表示・非表示を入れかえる
非表示になったiframeに対して、指定秒数後にリロードするsetTimeout関数を仕掛ける

という処理を行います。

すると指定秒数後に非表示側のiframeがリロードされ、またloadイベントが発動します。

これを繰り返すことで、ちらつきを抑えて表示切替をすることが可能になると思われます。

実装サンプルを作りましたので、参考にしてください。

html
1<!DOCTYPE html>
2<html lang="ja-jp">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7</head>
8<body>
9  <!-- 2つのiframeを重ね合わせ、cssで定期的に表示非表示を切り替えます。 -->
10  <iframe src="./inner1.html" frameborder="0" class="inner"></iframe>
11  <iframe src="./inner2.html" frameborder="0" class="inner hidden"></iframe>
12
13  <style>
14    iframe.inner{
15      width: 640px;
16      height: 400px;
17      border: 1px solid black;
18      position: absolute;
19      top: 0;
20      left: 0;
21
22      visibility: visible;
23    }
24    .inner.hidden{
25      visibility: hidden;
26    }
27  </style>
28
29  <script>
30    const iframes = document.querySelectorAll('iframe.inner');
31    iframes.forEach( elem => {
32      // iframeページのロードが完了した時に実行する。見えていないほうのiframeのloadイベントが実行される。
33      elem.addEventListener('load', event => {
34        // hiddenクラスの入れ替え。更新したページ側が見えるようになる
35        iframes.forEach( elem => elem.classList.toggle('hidden'));
36        // 見えていないほう（上の行でhiddenになった）のiframeに対し、10秒後のリロードを仕掛ける
37        setTimeout(() => {
38          document.querySelector('iframe.inner.hidden').contentWindow.location.reload();
39        }, 10000);
40      })
41    })
42  </script>
43</body>
44</html>

サイネージ用途と書いてあったので、フェードなどのトランジションは必要ないと思われますが、必要であれば個別に実装してください。

追記

CodeSandboxで作成したサンプルです。最新版の各種ブラウザでそのまま動作します。

https://codesandbox.io/s/async-shadow-tcz8fs?file=/index.html

投稿2023/06/29 12:37

編集2023/06/30 05:13

hope_mucci

総合スコア4447

laurentia

2023/06/30 01:55

chromeでは動かなかったのですが、edgeでは無事希望通りの動作で動かすことができました。ありがとうございました！

laurentia

2023/06/30 04:54

すみません、最新版のEdgeに更新したところ動かなくなりました。レガシーではない古いバージョンのegdeなら動いたのですが……。

hope_mucci

2023/06/30 05:18

最新版の各種ブラウザで問題なく動作します。回答にサンプル実装を載せました。確認してみてください。サンプル実装が動作してご自分の実装が動作しない場合、回答本文にも書いた「同一オリジン制限」の可能性が高いと見ます。（そうでない可能性もあります）原因や機序が異なる問題ですので、改めて新しい質問で実装コードも含めて投稿されると良いでしょう。

laurentia

2023/06/30 05:26

ありがとうございます、新しい質問スレッドを立ててみます。

laurentia

2023/06/30 06:16

お騒がせしました。デベロッパーツールでエラー原因を探ったところ、環境ゆえの「同一オリジン制限」だったので、どうにか解決することができました。本当にありがとうございました！

PONCHIMAN

2024/03/20 05:10

はじめまして。投稿者様と全く同じことにトライしているのですが、うまく動作しません（更新がかからないです）。どうも「同一オリジン制限」という部分が引っかかっているような気がするのですが、いまいちこの条件の内容が理解出来ず困っております。無知で恐縮なのですが、投稿者様がどのように上記の問題を解決されたのかご教示いただけませんでしょうか。

行動規範の内容に同意します