Прекратить кеширование JSON-Pretty для зависящих от него сценариев JavaScripts

Я создал сайт Squarespace, используя шаблон с уникальной галереей типов каменной кладки - https://wexley-demo.squarespace.com/. Этот шаблон был выбран почти исключительно из-за этого макета галереи, но в остальном он имеет несколько недостатков, и я, по сути, перестроил сайт с нуля. Я не нахожусь в режиме разработчика, поэтому имейте в виду, что у меня ограниченный доступ к коду - я могу добавлять код только в заголовок, на страницу (однако, не в случае галереи) и в нижний колонтитул, но только по всему сайту. как кодовый блок. Я в идеале ищу решение этой проблемы, которое работает только с добавлением кода в заголовок.

Галерея, которую вы увидите в предварительном просмотре по указанному выше URL-адресу, имеет досадную проблему, поскольку действие по умолчанию для щелчка по миниатюре - это открытие своего рода лайтбокса - в отличие от большинства страниц типа "Галерея" Squarespace, вы не можете назначить гиперссылка на каждую миниатюру. Обратите внимание, что вы можете установить этот атрибут «URL перехода по ссылке» через панели 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>

Этот код работает хорошо - по словам автора (кошка-призрак), он «выполняет ajax-загрузку в json галереи, чтобы получить 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.

Это заставляет меня думать, что это проблема, поскольку скрипт выполняет функции на этом URL-адресе XHR.

Может, это поможет найти решение?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
118
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Одна из вероятных причин (и если ваш код находится в файле .js, а не в теге скрипта в разметке). Если этот файл был ранее загружен пользователем и его кеш включен, браузер будет обслуживать файл, который он сохранил - в отличие от файла с сервера - файл все еще будет существовать в запросе, но если вы посмотрите на Сетевой инспектор, вы должны иметь возможность увидеть файл и узнать, из кешированного ли он источника - обычно кэшированный файл обслуживается намного быстрее (несколько миллисекунд), а не несколько сотен.

На большинстве производственных сайтов это решается путем хеширования файла, или вы также можете попробовать использовать тег версии

Единственное, что приходит на ум, - это включение вашего javascript в саму модель DOM в тег скрипта, хотя это может вызвать некоторые другие проблемы, которые могут возникнуть. Это будет работать, потому что ваш html-файл передается клиенту напрямую с сервера и обычно не кэшируется (хотя может быть). Если ваш код находится в теге сценария в вашей разметке, вы, вероятно, будете кэшировать серверную часть, и вам нужно будет очистить это на сервере.

Я попробовал оба подхода - файл .js, загруженный в другое место и вызванный, и вставку всего сценария непосредственно в заголовок внутри тегов сценария. При использовании подхода с использованием файлов .js даже при полном изменении имени файла .js между обновлениями этот подход не работает с новыми миниатюрами. При проверке загрузки ресурса .js не кешируется в моем браузере и обновляется каждый раз, когда я загружаю страницу. Я заставил Squarespace очистить кеш на стороне сервера для тестирования - все равно не повезло.

paulcook 17.04.2018 18:10

См. Мою правку выше - я считаю, что проблема в этом. Какие-нибудь рекомендации?

paulcook 17.04.2018 19:14

Судя по параметрам запроса в URL, ?page=1&format=json-pretty обслуживает ресурсы страницы в формате JSON. Возможно, стоит вывести эти данные json и посмотреть, что вы получите обратно. Если эти данные JSON кэшируются, вы мало что можете с этим поделать - возможно, стоит поговорить об этом с Squarespace. У них будет гораздо больше знаний, чем у меня.

Matthew Brent 17.04.2018 19:27

Похоже, вот что происходит - данные JSON загружаются из кеша диска. Облом, что это невозможно остановить!

paulcook 17.04.2018 19:28

Кажется, исправили - см. Мой ответ ниже.

paulcook 17.04.2018 19:48
Ответ принят как подходящий

Сценарий полагался на JSON-версию страницы, которую можно найти по адресу 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();

Где uriOfCachedPage = "https://www.website.com/gallery-page?page=1&format=json-pretty", похоже, удалось избежать кеширования и решить проблему после ограниченного тестирования.

Другие вопросы по теме