停止为依赖它的 JavaScript 缓存 JSON-Pretty答案

【问题标题】：Stop caching of JSON-Pretty for JavaScripts that are dependent on it停止为依赖它的 JavaScript 缓存 JSON-Pretty
【发布时间】：2018-09-27 15:59:35
【问题描述】：

我使用具有独特砖石类型画廊的模板构建了一个 Squarespace 网站 - https://wexley-demo.squarespace.com/。选择这个模板几乎完全是因为这个画廊布局，但除此之外有几个缺点，我基本上是从头开始重建网站。我不是处于开发者模式，所以请记住，我对代码的访问权限有限 - 我只能将代码添加到页眉、页面（但是，不是在画廊的情况下）和页脚，但只能在站点范围内作为代码块。 理想情况下，我正在寻找解决这个问题的方法，只需要在标题中添加代码。

您将在上面的 URL 中看到预览的画廊有一个不幸的问题，即单击缩略图的默认操作是打开各种灯箱 - 与大多数 Squarespace“画廊”类型的页面相反，您不能，为每个缩略图分配一个超链接。请注意，您可以通过 sqs 面板设置此“Clickthrough URL”属性，但默认情况下，该属性将被忽略并仅打开一个灯箱。

对于我们的网站，点击这些缩略图将您带到项目页面至关重要。为此，标题中包含以下脚本（来自另一个 sqs 用户 ghostcat）：

<script>
  var currentPageBaseURL=window.location.href.split("?")[0];
   Y.on("domready",function(e){
   Y.io(currentPageBaseURL+"?page=1&format=json-pretty", {
     on:{success: jsonLoaded}
  });
  function jsonLoaded(err,data){
  try{
   var jsonResponse = Y.JSON.parse(data.responseText);
   var items=jsonResponse.items
   Y.all("#thumbList .thumb, #galleryWrapper .slide").each(function(e){
     var thumbId=this.getAttribute("data-slide-id");
     for(var i=0;i<items.length;i++){
       if(thumbId==items[i].id && items[i].clickthroughUrl){
         this.setAttribute("data-clickthrough-url",items[i].clickthroughUrl).on("click",function(e){
           e.preventDefault();
           e.stopPropagation();
          window.open(this.getAttribute("data-clickthrough-url"),'_self');
         })
       }
     }
   })
   }catch(e){}
   }
   });
</script>

这段代码运行良好 - 据作者 (ghostcat) 称，它“在画廊 json 上执行 ajax 加载以获取点击 URL，然后进行一些 DOM 操作以更改拇指点击事件” - 除了它，它如果他们以前访问过该网站以正常工作，则要求网站访问者清除其缓存。因此，如果访问者之前访问过网站项目页面，并且我们添加了自上次访问以来的缩略图，则这些缩略图将具有打开灯箱的默认操作，并且只有旧的缩略图可以使用。

我尝试将此代码插入页脚，但无济于事。我还尝试将脚本作为 .js 文件上传，并在页面加载时调用它。更新图库后，我更改了脚本文件名并使用新文件名调用了一个版本 - 这并没有解决问题。

奇怪的是，脚本并没有被 Chrome 或 Safari 缓存（在检查资源加载时），但在访问页面之前清除缓存总是可以使其按预期运行。

目前，我有一个重定向方法，我将日期添加到画廊版本 URL（即 www.website.com/work -> www.website.com/work-041718）并设置 301 重定向，即可以，但是在画廊 URL 后面加上日期感觉很笨拙。

是否可以对脚本/其他策略进行任何修改以解决此问题？

很高兴以任何可能的方式澄清。

编辑 - 我又看了看检查器，发现正在缓存一个 XHR 文件。这个“文件”包含我将在面板中设置的所有图像属性，包括点击 URL。

也可以在 www.website.com/galery-page?page=1&format=json-pretty 找到

这让我觉得这是问题所在，因为脚本正在此 XHR URL 上运行函数。

也许这有助于找到解决方案？

【问题讨论】：

标签： javascript json ajax dom squarespace

【解决方案1】：

一个可能的原因（假设您的代码在 .js 文件中，而不是在标记中的脚本标记中）。如果此文件先前已由用户下载并且启用了缓存，则浏览器将提供它保存的文件 - 而不是来自服务器的文件 - 该文件仍将存在于请求中，但如果您查看网络检查器，您应该能够看到文件以及它是否来自缓存的源 - 通常缓存文件的提供速度要快得多（几毫秒），而不是几百个。

这在大多数生产站点中通过对文件进行哈希处理来解决，或者您也可以尝试使用version tag

唯一想到的另一件事是将您的 javascript 包含在 DOM 本身的脚本标记中，尽管这会引入一些可能发生的其他问题。这会起作用，因为您的 html 文件直接从服务器提供给客户端，并且通常不会缓存（尽管可以）。如果您的代码在标记中的脚本标记中，那么您可能会缓存服务器端，您需要在服务器上清除它。

【讨论】：

我尝试了这两种方法 - 一个 .js 文件上传到别处并被调用，并将整个脚本直接插入到脚本标签的标题中。使用 .js 文件方法，即使在更新之间完全更改 .js 文件名，该方法也会因新缩略图而失败。在检查资源加载时，.js 没有缓存在我的浏览器上，每次加载页面时它都会被拉起。我确实让 Squarespace 清除服务器端缓存并进行测试 - 仍然没有运气。
请看我上面的编辑 - 我相信这是问题所在。有什么建议吗？
从 URL ?page=1&format=json-pretty 中的查询参数判断，是以 JSON 格式提供页面资源。可能值得将 json 数据记录下来，看看你得到了什么。如果此 JSON 数据正在缓存，那么您对此无能为力——这可能值得与 squarespace 讨论。他们会比我有更多的知识。
这似乎是正在发生的事情 - JSON 数据正在从磁盘缓存加载。可惜这无法阻止！
似乎已修复 - 请参阅下面的答案。

【解决方案2】：

脚本依赖于页面的 JSON-pretty 版本，可在 www.website.com/gallery-page?page=1&format=json-pretty 找到。这是由浏览器缓存的，因此，该脚本引用了一个过时的画廊项目列表和点击 URL。

添加此脚本（如here 所述）：

var xhr = new XMLHttpRequest();
xhr.open("GET", uriOfCachedPage, true);
xhr.setRequestHeader("Cache-Control", "max-age=0");
xhr.send();

where uriOfCachedPage = "https://www.website.com/gallery-page?page=1&format=json-pretty", 似乎避开了缓存，经过有限的测试解决了问题。

【讨论】：