В настоящее время я создаю веб-сайт нашей компании с использованием WordPress и столкнулся с некоторыми проблемами, связанными с встраиванием фрагмента html, который указывает на какое-то меню и отображает это меню как виджет на нашем веб-сайте (фрагмент ниже):
<div id="leafly-menu">
</div>
<div style="text-align:center;">
Visit our profile on <a href="https://www.leafly.com/dispensary-
info/happy-hemp">Leafly</a>
</div>
<script
src="https://www.leafly.com/public/global/js/dispensarymana
ger/embed.js">
</script>
<script>
var pymParent = pym.Parent('leafly-menu',
'https://www.leafly.com/embed/menu2/happy-hemp', {});
</script>
Это работало некоторое время. При посещении веб-сайта, как обычно, меню отображается и работает так, как должно. Однако с тех пор у меня появилось больше времени на создание более совершенного веб-сайта / дизайна, и теперь этот фрагмент больше не работает. Этот фрагмент HTML является фрагментом HTML, предоставленным Leafly, и поэтому я сам не имею никакого контроля над фактическим JS или HTML фрагмента, и при этом у меня нет доступа к изменению каких-либо параметров того, как мой сайт извлекает файл JS с их конца.
Вот некоторые из наиболее недостойных вещей, которые используются для создания сайта:
- CMS: WordPress
- Интересные плагины: Elementor PRO (Конструктор страниц) | Премиум Аддоны PRO (Elementor
расширение)
- Плагины производительности: WP Rocket (кэширование и производительность) | Вообрази (WP Rocket
Расширение / Сжатие медиа файла) | Cloudflare (CDN; * Политика кэширования интегрирована
с и под контролем WP Rocket)
Единственное истинное изменение, которое я внес на сайт вне эстетики, - это попытка обратить внимание на оптимизацию и производительность. Вместо этого я решил купить WP Rocket; плагин для сайтов WordPress, который помогает управлять политиками кэширования в списке других предлагаемых функций. Примерно в это же время я заметил, что фрагмент перестал работать.
Учитывая, что WP Rocket интегрируется и управляет политикой кэширования моей CDN Cloudflare, WP Rocket также позволяет минимизировать JS, HTML и CSS. При проведении некоторых исследований я решил использовать следующие функции WP Rocket:
- HTML Minification
- Объединение Google шрифтов
- CSS Minification
- JS Minification (исключая любые JS по этому пути:
www.leafly.com/public/global/js/dispensarymanager/embed.js)
- Отсрочка JS
- Безопасный режим для JQuery
- Предварительная загрузка кэша (автоматическая загрузка каждые 24 часа)
Теперь, я попробовал все, что думал, чтобы лично проверить себя. В своей политике кэширования я исключил все, что происходит от "leafly.com/", я попытался внести белый список "leafly.com/" в мои правила и исключения брандмауэра Cloudflare. Я попытался реструктурировать HTML-код во фрагменте, предоставленном Leafly; и т. д. Все, что я мог придумать, могло вызвать проблемы с рендерингом JS для Leafly, я попытался отключить. Тем не менее, нет сигары.
Итак, это заставляет меня спрашивать:
- что может привести к встраиванию HTML от третьей стороны - когда-то
работает, чтобы вдруг перестать корректно работать / рендериться?
- будет ли минимизировать мою JS или CSS причину или будет источником этой проблемы?
Ребята (и девочки), я рисую здесь пробел. Я просто не могу понять эту чертову вещь и буду рад некоторым предложениям по устранению неполадок и решениям.
Вот как HTML предоставляется конечному пользователю при посещении сайта в той области, где должно находиться меню.
<div class="elementor-element elementor-element-9bb0fdd elementor-widget
elementor-widget-global elementor-global-1233 elementor-widget-html"
data-id="9bb0fdd" data-element_type="widget" data-
widget_type="html.default">
<div class="elementor-widget-container">
<div id="leafly-menu">
<div style="text-align:center;">
Visit our profile on
<a href="https://www.leafly.com/dispensary-
info/happy-hemp">
Leafly
</a>
</div>
<script src=
"//www.leafly.com/public/global/js/
dispensarymanager/embed.js" defer="">
</script>
<script>
var pymParent = pym.Parent('leafly-menu',
'https://www.leafly.com/embed/menu2/happy-
hemp', {});
</script>
</div>
</div>
</div>
Вот ссылка, сравнивающая то, как она должна выглядеть, с тем, что она действительно отображает сейчас:
Вот ссылка на глобальный файл JS, предоставленный Leafly:
Единственный совет, который я смог найти, - это проверка контейнера div на самой веб-странице; в котором к нижней части консоли разработчика я получаю желтый треугольник с восклицательным знаком, который гласит:
- JQMIGRATE: Миграция установлена, версия 1.4.1 content.min.js: 2
[Устаревание] Element.createShadowRoot устарело и будетудалено в M73, около марта 2019 года. Пожалуйста, используйте Element.attachShadow.См. https://www.chromestatus.com/features/4507242028072960 для получения более подробной информации.
Если у кого-либо есть идеи о том, как наилучшим образом устранить неполадку или исправить эту проблему, пожалуйста, помогите брату: P
Спасибо!