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

Question

我使用具有独特砌体类型画廊的模板构建了一个 Squarespace 网站 - https://wexley-demo.squarespace.com/。选择这个模板几乎完全是因为这个画廊布局，但在其他方面有几个缺点，我基本上从头开始重建了这个网站。我没有处于开发者模式，所以请记住我对代码的访问权限有限 - 我只能将代码添加到 header，在页面上（但是，不是在画廊的情况下），并且在页脚，但仅在整个站点范围内作为代码块。 理想情况下，我正在寻找仅在 header.

中添加代码即可解决此问题的方法

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

对于我们的网站，点击这些缩略图将您带到项目页面至关重要。为实现这一点，以下脚本（从另一个 sqs 用户 ghostcat 找到）包含在 header:

<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) 的说法，它 "does an ajax load on the gallery json to get the clickthrough urls and then some DOM manipulation to change the thumb click event" - 不同之处在于，如果网站访问者之前访问过该网站，则需要清除缓存才能正常工作适当地。因此，如果访问者之前访问过网站项目页面并且我们在他们上次访问后添加了缩略图，这些缩略图将具有打开灯箱的默认操作，并且只有旧缩略图有效。

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

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

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

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

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

EDIT - 我再次查看检查器，发现正在缓存一个 XHR 文件。此 'file' 包含我将在面板中设置的所有图像属性，包括点击率 URL。

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

找到

这让我认为这是问题所在，因为脚本是运行这个 XHR URL 上的函数 URL。

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

Answer 1

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

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

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

Answer 2

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

添加此脚本（如所述）：

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"，似乎已经避免了缓存，经过有限的测试解决了这个问题。

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

Stop caching of JSON-Pretty for JavaScripts that are dependent on it

javascript

json

ajax

dom

squarespace