実現したいこと
ユーザーがホームぺージを読み込んだ時、またはページ内の『リロードボタン』を押したときに常に新しい画像が表示されているようにしたい
発生している問題・分からないこと
都合によりサイトの編集者と画像の更新者が異なるサイトがあり、htmlのコードは変更なしのまま画像の更新をバッチ処理で行っています。
画像自体は変更されていてもコードが同じの為同一画像と見なされ、ユーザーの端末によっては自分で【Ctrl】+【F5】キーなどの操作をしキャッシュのクリアをしないと画像が反映されません。
≪既に実施済みの対応≫
①<meta http-equiv="Cache-Control" content="no-store">の追加
②『リロードボタン』の追加
⇒少なくともChromeでは反映されませんでした。
そのため、さらに追加対策として画像に現在時刻のパラメータを付与したいと考えております。
URL先に飛んだ時と『リロードボタン』を押した時に画像のパラメータが変更され、別画像と認識され再読み込みをさせることが目的です。
始めに記載したように画像更新者がサイト編集者と異なるため、画像更新の度にhtmlを編集してパラメータを変更する、ということが運用面で難しいことからこの部分を自動化したいです。
（上記問題が解決できれば手段は現在時刻のパラメータ付与でなくても問題ありません）
サイト自体は現在htmlで作成していますが、php化も可能です。
javascriptで「URLにパラメータを付与」など類似の記事は見つけましたが、知識不足により自身の状況に置き換えて反映させる方法がわかりませんでした。
ご教示頂けると幸いです。
該当のソースコード
<body onload="pageLoad();"> <p>最終更新日時：</p> <div id="now"></div> <input type="button" value="再読込" onclick="pageReload()"> <img src="img01.jpg" alt="" width="100%"> <script> //リロードボタンと現在時刻の表示 function pageLoad() { var now = new Date(); document.getElementById('now').innerHTML = now; } function pageReload() { window.location.reload(); } </script> </body>
試したこと・調べたこと
上記の詳細・結果
上手く反映させることが出来ませんでした。
補足
特になし
0 コメント