防止 iframe src 中的外部文件被缓存（使用 CloudFlare）答案

【问题标题】：Prevent external files in src of iframe from being cached (with CloudFlare)防止 iframe src 中的外部文件被缓存（使用 CloudFlare）
【发布时间】：2017-10-12 18:07:44
【问题描述】：

我正在尝试制作一个像 plunker 这样的游乐场。我刚刚注意到生产中的一个非常奇怪的行为（在 Cloudflare 中使用 active mode），而它在 localhost 中运行良好。

通过iframe，操场预览index_internal.html，其中可能包含指向其他文件的链接（例如，.html、.js、.css）。 iframe 能够解释外部链接，例如<script src="script.js"></script>。

所以每次用户在编辑器上修改他们的文件（例如script.js）时，我的程序都会将新文件保存到服务器上的临时文件夹中，然后通过iframe.src = iframe.src刷新iframe，它在@上运行良好987654334@.

但是，我意识到，在生产中，浏览器总是不断加载 initial script.js，即使用户在编辑器中对其进行了修改，并且在服务器的文件夹中写入了新版本.比如我在Dev Tools ==> Network看到的总是script.js的初始版本，而我可以通过左侧的less查看服务器中保存的script.js的新版本。

有人知道为什么会这样吗？以及如何解决？

编辑 1：

我尝试了以下方法，但不适用于script.js：

var iframe = document.getElementById('myiframe');
iframe.contentWindow.location.reload(true);
iframe.contentDocument.location.reload(true);
iframe.contentWindow.location.href = iframe.contentWindow.location.href
iframe.contentWindow.src = iframe.contentWindow.src
iframe.contentWindow.location.replace(iframe.contentWindow.location.href)

我尝试添加一个版本，它适用于index_internal.html，但没有重新加载script.js：

var newSrc = iframe.src.split('?')[0] 
iframe.src = newSrc + "?uid=" + Math.floor((Math.random() * 100000) + 1);

如果我将 Cloudflare 转为 development mode，script.js 会重新加载，但我确实希望将 Cloudflare 保留在 active mode。

【问题讨论】：

标签： caching iframe browser-cache cloudflare html-head

【解决方案1】：

我找到了。

我们可以在 CloudFlare 中创建自定义缓存规则：

https://support.cloudflare.com/hc/en-us/articles/200168306-Is-there-a-tutorial-for-Page-Rules-#cache

例如，我可以将文件夹www.mysite.com/tmp/* 的Bypass 设置为Cache Level。

【讨论】：