如何在不破坏其他脚本的情况下将外部脚本嵌入我的页面答案

【问题标题】：How to embed external script to my page without breaking other script如何在不破坏其他脚本的情况下将外部脚本嵌入我的页面
【发布时间】：2020-04-10 00:09:22
【问题描述】：

您好，我已经解决这个问题超过 2 周了，我找不到正确的方法来将我的脚本代码嵌入到我的页面，而不会在我的控制台中从我的主题上传的另一个 js 文件中创建一个错误。

此嵌入代码使我可以从 lodgify 服务添加日历和立即预订按钮，您可以在我的页面中看到它，右侧黑色侧边栏包含立即预订信息。老实说，我不知道它为什么会产生错误。

我的意思是在嵌入我的脚本之前在我的网站上一切正常，当我嵌入它时，发生了错误。我尝试了很多不同的方法，但没有成功，我总是在同一个文件中遇到同样的错误。最后，我尝试在有问题的文件之后加载我的嵌入代码，但对我来说没有任何改变。

这里是我的link，如果你想检查控制台，可能会向我解释一些我还没有看到的东西。

这是我的嵌入代码：

<script type="text/javascript" src="//static.lodgify.com/themes/shared/v3/assets/latest/embed-ldgfy-book.min.js" async="async" style="display:block!important" class="embed-ldgfy-script-loader embed-ldgfy-book-script-loader" id="lodgify-script-book-now-box" data-website-id="27****79" data-website-slug="antibesrental" data-domain="lodgify.com" data-protocol="https" data-property-id="27****26" data-culture="en" data-culture-iso="en-US" data-currency="EUR" data-token="oHwmNCP**********o5s"></script>

以下是我将其添加到我的页面的方法：

<script>
jQuery(document).ready(function() {
$("#content").append('<script type="text/javascript" src="//static.lodgify.com/themes/shared/v3/assets/latest/embed-ldgfy-book.min.js" async="async" style="display:block!important" class="embed-ldgfy-script-loader embed-ldgfy-book-script-loader" id="lodgify-script-book-now-box" data-website-id="27****79" data-website-slug="antibesrental" data-domain="lodgify.com" data-protocol="https" data-property-id="27****26" data-culture="en" data-culture-iso="en-US" data-currency="EUR" data-token="oHwmNCP**********o5s"></'+'script>');
});
</script>

这是我将其添加到页面时的错误：

TypeError: $elm.airtifactFitVids 不是函数。（在 '$elm.airtifactFitVids()', '$elm.airtifactFitVids' 未定义）。

这里是来自 main-build.js 的部分代码：

// VARIOUS FUNCTIONS INIT
    _initFitVid: function( $elm ) {
        $elm.airtifactFitVids();
    },

    _initTwitterFeed: function( $elm ) {

【问题讨论】：

标签： javascript jquery wordpress dependencies

【解决方案1】：

我认为您的脚本已正确加载/嵌入到页面中。在 DevTools 中查看您的网络调用。任何方法调用或定义函数时的错误都可能有任何问题。

见下图：

【讨论】：

是的，它已完美加载，但是当我的页面中存在此嵌入脚本时会生成错误，而当我从嵌入脚本中删除 src 时错误会消失？请检查控制台，您将在我的 main-build.js（主题的 js 文件）中看到此错误：TypeError: $elm.airtifactFitVids is not a function。（在 '$elm.airtifactFitVids()' 中，'$elm.airtifactFitVids' 未定义）。

【解决方案2】：

如果可以提供帮助，请参考以下支持解决方案：

我们的团队已经查看了我们这边是否有任何问题。但是，我很高兴地说该小部件可以正常运行。

相反，问题在于我们的小部件和您的主题似乎使用的是同一个库。基本上，同时使用主题和具有完整功能的小部件的解决方案是，将它们分别加载到单独的库中，这样代码就不会冲突。

为了清楚起见，我们也在呼应主题所有者让您知道的内容：主题在这里没有错，我们也没有错。 由于这两者并不是专门为相互合作而开发的，不幸的是，这可能会发生。但就像他们说的，对分离库进行自定义。

这就是它不起作用的原因：正如您所见，问题来自无法计划或预见的冲突，而且尽管我们愿意提供帮助，但我们无法解决。

【讨论】：