Q&A
iframeの何のキャッシュをクリアしたいのでしょうか？
そのページ自体ですか？
それとも、読み込んでいるリソースだけですか？？
前提・実現したいこと
iframe内だけをキャッシュ無効にしたいです。
発生している問題・エラーメッセージ
～.css?210505 や ～.js?210505 など日付を付けると更新されると思うのですが
そうなると毎日?以降の数字を変えなければならないので、それは回避したいと考えています。
該当のソースコード
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <META HTTP-EQUIV="expires" content="Sun, 10 Jan 1990 01:01:01 GMT"> iframe内に上記を記述してもダメでした。 indexにiframeを設置していますが、iframe以外のキャッシュは有効にしたいので indexには記述していません。scriptを使えばいいのかと思い
<script> var now = new Date(); document.getElementById("now").innerText = (now.getMonth() + 1) + "/" + (now.getDate()); </script> <script src="timesale.js?p=(new Date()).getTime()"></script>なども書いてみましたがダメでした。
index内にscriptを記述できない仕様ですので、iframe内に記述したのですが、ダメでした。
すみません、どなたかご教示お願いいたします。
また、そのiframeページは、
静的HTMLでしょうか、PHPなどの、
サーバーサイドを使用していますでしょうか。
iframe自体をキャッシュ無効にしたいです。
静的HTMLでPHPなどは使用しておりません。
回答1件
0
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
総合スコア8402
reload(true)は、以前は特定のブラウザに限りスーパーリロードが効いていた時代もありますが、
現代では、いずれのブラウザにおいてもスーパーリロードにはなりません。
miyabi_takatsuk さん、そうなんですね。ありがとうございます。
それを踏まえて、実験でうまくいった策に回答を改訂しました。
試してみましたが、キャッシュが残っていました。
ブラウザはChromeです。
そうですか…。ではやはり異なるURLパラメーターを付加して回避するしかないですね。
回答を改訂しました。
ありがとうございます。
やはりキャッシュが残りました。
私の書き方が悪いのかもしれません。
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>
１つだけ
const url = timesale.html + '?' + date.toISOString();
これは
const url = 'timesale.html' + '?' + date.toISOString();
かな？
失礼いたしました。
const url = 'timesale.html' + '?' + date.toISOString();
に書き換えましたが、やはり残ったままでした。
うーん、じゃあ、あとは… ちゃんと <iframe src="timesale.html" id="iframe"> になってます？
はい、なっています。
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 に表示が変わる。
というわけで、少なくとも私の環境では成功しています。
何が違うんでしょうね。サーバー側の何かかなあ…
何度かやってみたのですが、残っておりましたので
サーバーも確認してみます。
ご丁寧に、ありがとうございました！
あなたの回答
tips
プレビュー
