Question

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

您在上面的网址上预览的图库有一个不幸的问题，因为点击缩略图的默认操作是打开各种各样的灯箱 - 您不能，而不是大多数Squarespace＆＃34 ;廊＆＃34;键入页面，为每个缩略图指定一个超链接。请注意，您可以设置此＆＃34;点击后到达网址＆＃34;通过sqs面板属性，但默认情况下，这将被忽略，只打开一个灯箱。

对于我们的网站，这些缩略图必须在点击时将您发送到项目页面。为实现此目的，标题中包含以下脚本（从另一个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），它＆＃34;在库json上加载ajax以获取点击网址，然后进行一些DOM操作以更改拇指点击事件＆＃ 34; - 除此之外，如果他们之前访问过该网站以正常工作，则需要网站访问者清除其缓存。因此，如果访问者之前访问过网站项目页面并且我们自上次访问后添加了缩略图，则这些缩略图将默认操作打开灯箱，只有旧缩略图才有效。

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

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

目前，我有一个重定向方法，我将日期添加到图库版本URL（即www.website.com/work - ＆gt; www.website.com/work-041718）并设置301重定向，这是有效的，但添加日期的画廊URL感觉很笨。

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

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

编辑 - 我再看一下检查器，发现正在缓存XHR文件。这个＆＃39;文件＆＃39;包含我将在面板中设置的所有图像属性，包括Clickthrough URL。

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

找到它。

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

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

Answer 1

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

这可以通过散列文件在大多数生产网站中解决，或者您也可以尝试使用version tag

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

Answer 2

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

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

'assetManager' => [
    'bundles' => [
        'yii\web\JqueryAsset' => [
            'sourcePath' => null , 'js' => [ '//code.jquery.com/jquery-2.2.4.min.js' ] ,
        ] ,
        'yii\bootstrap\BootstrapAsset' => [
            'sourcePath' => null , 'css' => [ '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ] ,
        ] ,
        'yii\bootstrap\BootstrapPluginAsset' => [
            'sourcePath' => null , 'js' => [ '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' ] ,
        ] ,
    ] ,
] ,

uriOfCachedPage =＆＃34; https://www.website.com/gallery-page?page=1&format=json-pretty＆＃34;，似乎已经避免了缓存并在有限测试后解决了问题。

停止缓存JSON-Pretty for JavaScripts依赖它

2 个答案: