时间戳

首页 > 解决方案 > 缩小 JS 会导致将外部 JS 嵌入我的网站时出现问题吗？如果是这样，我该如何解决这个问题？

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

问题描述

我目前正在使用 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 片段是 Leafly 提供的 HTML 片段，因此我自己无法控制该片段的实际 JS 或 HTML，也无权更改有关我的网站如何从其末端获取 JS 文件的任何参数。

以下是用于构建网站的一些更值得注意的事情的细分：

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

请记住，WP Rocket 集成并控制了我的 Cloudflare CDN 的缓存策略，WP Rocket 还允许缩小 JS、HTML 和 CSS。在做一些研究时，我选择使用 WP Rocket 的以下功能：

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

那么这导致我问：

伙计们（和女孩们），我在这里画一个空白。我只是无法弄清楚这该死的事情，并且会喜欢一些有关故障排除和解决方案的建议。

这是在访问菜单应位于的区域中的站点时向最终用户提供 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>

这是一个链接，比较了它应该呈现的样子和它现在真正呈现的样子：

以下是 Leafly 提供的全局 JS 文件的链接：

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

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

谢谢！

标签： javascriptjqueryhtmlwordpress

解决方案

推荐阅读