Question

我正在使用Angular.js页面并对html＆＃39; partial＆＃39;进行更改。刷新页面会导致Firefox正确地从服务器重新请求主html页面，但后续的部分＆＃39;客户端呈现的模板永远不会被重新请求，而是从BFCache中获取，因此无法检测到对这些文件的更改。

Firebug的屏幕截图： BFCache firebug screenshot

我可以通过开发服务器（Django）确认永远不会请求这些部分。

我已尝试过各种刷新，包括Reload Plus扩展程序。

Answer 1

这些不太理想，但似乎有两个选项可以解决这个问题。

一个是Clear Cache插件，可配置为清除磁盘和内存缓存并重新加载当前选项卡。我不确定这是完全清除缓存还是仅清除当前选项卡的域，但它可能是整个缓存。

另一种是在firebug中禁用浏览器缓存： firebug disable cache

我不确定这是否只会禁用当前页面，当前域或任何地方的缓存。

重新加载此页面以及此页面引用的所有内容仍然很不错。选项。

Answer 2

我只需在模板中设置一个标志，就像这样添加一个简单的onunload函数：

{% if CLEARBFCACHE %} <body onunload="myFunction()"> {% endif %}

然后在开发时设置CLEARBFCACHE = 1（在settings.py中）。

如果您需要测试生产集CLEARBFCACHE = 0然后部署到您的登台服务器或（如果您没有单独的服务器）我相信您可以将URL从127.0.0.1更改为locahost以使Firefox认为它是一个不同的网站。

Answer 3

另一种选择是以下列方式包括部分：

angular
    .module("app")
    .directive("appPartial", function () {
        return {
            templateUrl: "partials/partial1.htm"+getTempStr(),
            restrict: "E",
            scope: {},
            controller: PartialController,
            controllerAs: "vm"
        }
    });

function getTempStr(){
    // dev
    return "?a=" + (new Date().getTime()).toString();
    // prod
    //return "";
}

这种方式每次加载部分时都不会存储在BFCache中。

要在生产环境中使用BFCache，您可以取消注释'return'“'行而不是其他返回行。

Answer 4

另一个选择是让您的开发Web服务器至少为html文件发送一个Cache-Control标头：

Cache-Control: no-cache, max-age=0, must-revalidate, no-store

来源：How to Defeat the Browser Back Button Cache

然后，将永远不会缓存从开发服务器提供的所有文件，而是来自例如文件的文件。 CDN将是缓存，因此您不必在每次刷新时检索它们。

Answer 5

因为您正在制作单页应用程序。所以正确的解决方案应该是：

（1）将物理页面（即主页面）设置为＆＃34; Cache-Control：No-cache＆＃34;。物理页面应该很小，因为逻辑页面都是由JavaScript动态加载的，因此加载物理页面本身应该很快

（2）＆＃34; partial＆＃34;页面（即逻辑页面），每次发布新版本时都更改文件夹名称，

例如：部署新版本时，假设物理页面为index.html

在index.html内，所有JavaScript，css和angularJs模板文件都在文件夹资产中 - {{TimeStamp}}。因为index.html没有缓存，所以浏览器将始终获得最新的index.html。因为所有JS，css和其他模板html文件都在上一版本的不同文件夹中。所以浏览器将从新文件夹而不是从缓存加载所有文件。

您可以创建一个自动执行的构建过程：搜索index.html中的所有js，css文件，并用资产 - {{TimeStamp}} / **替换文件夹名称asset / **，然后将所有文件从资产文件夹复制到资产 - {{TimeStamp}}

现在您没有头痛缓存问题，但浏览器会利用本地缓存来加速您的网页。

（3）对于angularJs模板文件，因为它也是由JS加载的，所以我们强烈建议您使用相对路径（与当前运行的JS代码相关）来获取它。一些示例JS代码如下：

function _getCurrentJSPath() {
    var scripts = document.getElementsByTagName("script");
    var currentFile = scripts[scripts.length - 1].src;
    var currentPath = currentFile.substr(0, currentFile.lastIndexOf('/')) + "/";
    return currentPath;
}
...
 templateUrl: _getCurrentJSPath() + 'currencyField.html',

如何强制Firefox绕过Angular.JS局部的BFCache？

5 个答案: