Question

我目前正在使用WordPress构建我们公司的网站，并且在嵌入html片段时遇到了一些问题，该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代码段是Leafly提供的HTML代码段，因此我自己无法控制该代码段的实际JS或HTML，也无权更改有关我的网站如何从其末尾获取JS文件的任何参数。

以下是用于构建网站的一些更不值得的事情的分解：

CMS：WordPress
值得注意的插件：Elementor PRO（页面构建器）|高级插件PRO（Elementor 扩展名）
性能插件：WP Rocket（缓存和性能）|想象（WP火箭扩展名/媒体文件压缩）| Cloudflare（CDN； *集成了缓存策略并由WP Rocket控制）

除了美学之外，我对网站所做的唯一真正的改变就是尝试着眼于优化和性能。取而代之的是，我选择购买WP Rocket。 WordPress网站的插件，可帮助控制一系列提供的其他功能中的缓存策略。大约在这个时候，我注意到该片段停止工作。

请紧记WP Rocket与我的Cloudflare CDN集成并控制其缓存策略，WP Rocket还允许最小化JS，HTML和CSS。在进行一些研究时，我选择使用WP Rocket的以下功能：

HTML压缩
合并Google字体
CSS缩小
JS缩小（不包括此路径下的任何JS： www.leafly.com/public/global/js/dispensarymanager/embed.js）
推迟JS
JQuery的安全模式
缓存预加载（每24小时自动预加载）

现在，我已经尝试了所有我认为可以自己检查的内容。在我的缓存策略中，我排除了来自“ leafly.com/”的所有内容，并尝试将Cloudflare防火墙规则和例外中的“ leafly.com/”列入白名单。我尝试过重组Leafly提供的代码段中的HTML；等等。我想到的任何事情都可能导致呈现Leafly嵌入JS的问题，我尝试禁用。不过，没有雪茄。

所以这导致我问：

是什么原因导致第三方嵌入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>

这里是一个链接，用于比较应呈现的外观与现在真实呈现的外观：

应呈现为以下内容：https://imgur.com/0w1OKyY
它的实际呈现方式：https://imgur.com/VJw72yU

这里是Leafly提供的指向全局JS文件的链接：

https://www.leafly.com/public/global/js/dispensarymanager/embed.js

我能够收集到的唯一提示是通过检查网页本身上的div容器；在开发控制台的底部，我得到一个带有感叹号的黄色三角形，其内容为：

JQMIGRATE：已安装迁移，版本1.4.1 content.min.js：2 [不推荐使用] Element.createShadowRoot已弃用，并且将已在2019年3月左右在M73中删除。请使用Element.attachShadow 代替。参见https://www.chromestatus.com/features/4507242028072960 有关更多详细信息。

如果有人对解决或解决此问题的最佳方法有任何想法，请帮助兄弟：P

谢谢！

缩小JS会导致将外部JS嵌入我的网站时引起问题吗？如果是这样，我该如何解决？

0 个答案: