iframe内のキャッシュ無効について

前提・実現したいこと

iframe内だけをキャッシュ無効にしたいです。

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

～.css?210505 や～.js?210505 など日付を付けると更新されると思うのですが
そうなると毎日?以降の数字を変えなければならないので、それは回避したいと考えています。

該当のソースコード

scriptを使えばいいのかと思い

なども書いてみましたがダメでした。
index内にscriptを記述できない仕様ですので、iframe内に記述したのですが、ダメでした。

すみません、どなたかご教示お願いいたします。

miyabi_pudding

2021/05/05 03:24

iframeの何のキャッシュをクリアしたいのでしょうか？そのページ自体ですか？それとも、読み込んでいるリソースだけですか？？

miyabi_pudding

2021/05/05 03:25

また、そのiframeページは、静的HTMLでしょうか、PHPなどの、サーバーサイドを使用していますでしょうか。

time_waits

2021/05/05 03:55

iframe自体をキャッシュ無効にしたいです。静的HTMLでPHPなどは使用しておりません。

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

回答1件

JavaScript
1const date = new Date();
2const url = src_html + '?' + date.toISOString();
3const iframe_element = document.getElementById('iframe_id');
4iframe_element.src = url;
5iframe_element.contentDocument.location.reload();

これでどうでしょう？
実験レベルですが、Windows Edgeでは成功しました。サーバーはさくらのレンタルサーバー（nginx + Apache2.4系）です。

投稿2021/05/05 03:09

編集2021/05/05 04:19

itagagaki

総合スコア8407

miyabi_pudding

2021/05/05 03:13

reload(true)は、以前は特定のブラウザに限りスーパーリロードが効いていた時代もありますが、現代では、いずれのブラウザにおいてもスーパーリロードにはなりません。

itagagaki

2021/05/05 03:45

miyabi_takatsuk さん、そうなんですね。ありがとうございます。それを踏まえて、実験でうまくいった策に回答を改訂しました。

time_waits

2021/05/05 04:01

試してみましたが、キャッシュが残っていました。ブラウザはChromeです。

itagagaki

2021/05/05 04:21

そうですか…。ではやはり異なるURLパラメーターを付加して回避するしかないですね。回答を改訂しました。

time_waits

2021/05/05 04:48

ありがとうございます。やはりキャッシュが残りました。私の書き方が悪いのかもしれません。 index内に以下のように記述したのですが、いかがでしょうか？ <script type="text/javascript"> const date = new Date(); const url = timesale.html + '?' + date.toISOString(); const iframe_element = document.getElementById('iframe'); iframe_element.src = url; iframe_element.contentDocument.location.reload(); </script>

itagagaki

2021/05/05 04:50

１つだけ const url = timesale.html + '?' + date.toISOString(); これは const url = 'timesale.html' + '?' + date.toISOString(); かな？

time_waits

2021/05/05 04:59

失礼いたしました。 const url = 'timesale.html' + '?' + date.toISOString(); に書き換えましたが、やはり残ったままでした。

itagagaki

2021/05/05 05:07 編集

うーん、じゃあ、あとは… ちゃんと <iframe src="timesale.html" id="iframe"> になってます？

time_waits

2021/05/05 05:07

はい、なっています。

itagagaki

2021/05/05 05:25

Chromeでも試してみましたが成功しました。まずサーバーの.htaccessで <IfModule mod_expires.c> <filesMatch ".(x?html?|php)$"> Header set Cache-Control "max-age=86400" </filesMatch> </IfModule> にしてキャッシュが効くようにしてテストする。 test2.html <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <iframe src="test3.html" id="iframe_id"></iframe> <script> const date = new Date(); const url = 'test3.html' + '?' + date.toISOString(); const iframe_element = document.getElementById('iframe_id'); //iframe_element.src = url; //iframe_element.contentDocument.location.reload(); </script> </body> </html> test3.html <html> <head> </head> <body> Hello, world </body> </html> で、Chromeで http://xxx.xxx.xxx/test2.html にアクセスすると、iframe内にHello Worldが表示される。次に html3.html の内容を <html> <head> </head> <body> Hello, world 2 </body> </html> に変更してサーバーにアップロードしてChromeで http://xxx.xxx.xxx/test2.html にアクセスする。 => 表示は変わらない。（キャッシュされている）で、test2.html の<script>内でコメントアウトしていた2行の // を消して <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <iframe src="test3.html" id="iframe_id"></iframe> <script> const date = new Date(); const url = 'test3.html' + '?' + date.toISOString(); const iframe_element = document.getElementById('iframe_id'); iframe_element.src = url; iframe_element.contentDocument.location.reload(); </script> </body> </html> にしてアップロードしてChromeで http://xxx.xxx.xxx/test2.html にアクセスする。 => Hello, world 2 に表示が変わる。もう一度 test3.html の内容を <html> <head> </head> <body> Hello, world 3 </body> </html> に変えて、アップロードして、Chromeで http://xxx.xxx.xxx/test2.html にアクセスする。 => Hello, world 3 に表示が変わる。というわけで、少なくとも私の環境では成功しています。何が違うんでしょうね。サーバー側の何かかなあ…

time_waits

2021/05/05 07:19

何度かやってみたのですが、残っておりましたのでサーバーも確認してみます。ご丁寧に、ありがとうございました！

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