Блог

Главная - Вопросы по программированию - Проблема кэширования с помощью CSS Firefox, установленного с помощью javascript

Проблема кэширования с помощью CSS Firefox, установленного с помощью javascript

#javascript #css #wordpress #firefox #browser-cache

Вопрос:

Я использую плагин WordPress для добавления с помощью коротких кодов одного, двух или трех объектов «fontsampler» на конкретную страницу, каждый из которых включает текстовое поле и поле выбора шрифта для объекта fontsampler. JavaScript скрывает все поля выбора с помощью CSS, кроме последнего.

В Chrome и Edge никогда не возникает никаких проблем, но в Firefox в основном отображаются все поля выбора, а иногда только последнее (F5 всегда показывает все поля выбора, ctrl F5 дает переменные результаты). Веб-сервер также использует кэш Litespeed и проходит через CDN Cloudfare, но я не вижу, что это актуально, так как проблема только с Firefox.

NB Я также попробовал код и просто плагин на тестовом сервере ванильного wordpress (так что никакого кэширования сервера) и не увидел проблемы, поэтому я не уверен, как действовать дальше.

Вот код, если это поможет:

 jQuery(document).ready(function( $ ){
  $("body").on("fontsampler.event.afterinit",".fontsampler-wrapper" , function () {
    // ‘this’ is div.fontsampler-wrapper.initialized  NB all 3x fontsamplers are initialised on first event but not drawn on page e.g. fontpickers (event fires up to three times)
    //first count the number of fontsamplers on the page
    var fsCount = $($(document).find(".fontsampler-interface")).length;
    //check to see if last fontsampler has fully initialised (painted elements on page) else end event and wait for next
    var fsStub=".fontsampler-id-";
     var fsLast=fsStub fsCount;
     
         if ($($(document).find(fsLast)[0]).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0] !== undefined) {
   
        var fontsampler2Exists = $(document).find(".fontsampler-id-2").val();
        var fontsampler3Exists = $(document).find(".fontsampler-id-3").val(); 
  
  if (fontsampler3Exists !== undefined) {
    
    //Three lines
//    $(fs).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0].style.display='none';
    $($(document).find(fsStub 1)[0]).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0].style.display='none';
    $($(document).find(fsStub 2)[0]).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0].style.display='none'; 
    }
  else if (fontsampler2Exists !== undefined) {
    // Two lines
    $($(document).find(fsStub 1)[0]).find(".fontsampler-ui-block.column.fontsampler-ui-block-fontpicker")[0].style.display='none';  
  
  }
  else {
    // One line so don't hide any font picker
         }
    }

Комментарии:

1. Теперь мне интересно, не всегда ли .style готов к рендерингу в Firefox, и мне нужно добавить задержку или попробовать/поймать?

2. Я забыл упомянуть, что если у меня открыта консоль разработчика Firefox, она всегда отображается нормально только на F5, что усиливает идею проблемы со временем

Метки: ,