jQuery 在每个嵌入脚本上发送查询字符串

Question

我正在使用 MaterializeCSS、AngularJS 和 jQuery 构建一个简单的 Web 应用程序。 由于我使用的是 Materialize，并且由于我设计它的原因，我需要使用 jQuery 初始化每个 AngularJS View 中的侧边栏按钮。

如果我在每个 View 上复制此内容，它就可以正常工作:

<script>
    $(".button-collapse").sideNav({
        menuWidth: 150
    });
</script>

但是，如果我创建一个名为 sidenav.js 的新 js 文件:

<script src='/js/sidenav.js'></script>

由于某种原因，jQuery(或者可能是 Angular，但 XHR 是由 jQuery 启动的)发送带有查询字符串的 XHR 来加载此脚本，从而使缓存无效并由于延迟而导致“滞后”。虽然在使用一些 View 后，所有 View 都会被缓存，但由于查询字符串，脚本会不断重新加载:

[Thu Jul 21 16:39:31 2016] 192.168.0.103:38124 [200]: /js/sidenav.js?_=1469129949496
[Thu Jul 21 16:39:37 2016] 192.168.0.103:38123 [200]: /js/sidenav.js?_=1469129949497
[Thu Jul 21 16:39:42 2016] 192.168.0.103:38126 [200]: /js/sidenav.js?_=1469129949498
[Thu Jul 21 16:39:42 2016] 192.168.0.103:38125 [200]: /js/sidenav.js?_=1469129949499
[Thu Jul 21 16:39:47 2016] 192.168.0.103:38128 [200]: /js/sidenav.js?_=1469129949500
[Thu Jul 21 16:39:51 2016] 192.168.0.103:38129 [200]: /js/sidenav.js?_=1469129949501

如何阻止 jQuery 或 Angular 在其上放置查询字符串或其他方法来缓存它？

谢谢。

Answer 1

jQuery 的 $.ajax() 函数在其 settings 对象中有一个 cache 参数。默认情况下，对于大多数数据类型，cache 为 true，但 jsonp 和 script 除外，其默认值为 假。这会导致随机 _ 查询参数。

如果您有权访问正在下载此脚本的特定 $.ajax() 调用，则可以通过将 cache: true 添加到 来修复此问题该调用的设置对象。

否则，您可以将 $.ajaxSetup() 与 cache: true 值一起使用。这应该做同样的事情，除非特定的 $.ajax() 调用中有 cache: false ，或者如果有其他调用 $.ajaxSetup( ) 覆盖该值。此外，如果其他一些代码依赖于默认的 cache 值，这也会影响该代码。

也有可能是通过 $.getScript() 调用加载脚本，该调用不采用 settings 对象，并且无法覆盖 cache 直接设置。如果是这种情况，您可以将 $.getScript() 更改为等效的 $.ajax() 调用并添加 cache: true > 在那里设置，或者您可以使用 $.ajaxSetup()。

请参阅 $.ajax() 的文档, $.getScript() ，和$.ajaxSetup()了解更多信息。