実現したいこと
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を修正してもうまく更新・反映されません。
該当ページの動作サンプルで実際の仕様を確認しようにも消えておりました。
どうかお力を貸していただけないでしょうか。
0 コメント