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

嗨，我在这个问题上已经工作了两个多星期了，我无法找到正确的方法将我的脚本代码嵌入到我的页面中，而不在我的控制台中从我的主题上传的另一个js文件中创建错误

这个嵌入代码使我能够从lodgify服务中添加日历和book now按钮，正如您在我的页面中看到的，右边的黑色侧边栏显示book now信息。老实说，我不知道为什么会产生错误

我的意思是，在嵌入脚本之前，我的网站中的所有内容都可以正常工作，当我嵌入脚本时，出现了一个错误。我尝试了很多不同的方法，但是没有成功，我总是在同一个文件中出现相同的错误。最后，我尝试在有问题的文件之后加载我的嵌入代码，但没有任何改变

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

这是我的嵌入代码：

<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>

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

    _initTwitterFeed: function( $elm ) {

---

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

请参见下图：

---

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

请参见下图：

---

如果支持解决方案有帮助，请看下面的内容：

<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>

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

    _initTwitterFeed: function( $elm ) {

我们的团队已经检查了一下，看看我们这边是否有什么地方出了问题。然而，我很高兴地说，小部件运行正常

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

为了清楚起见，我们也在重复主题所有者告诉您的内容：主题没有错，我们也没有错由于这两种技术都不是专门为相互协作而开发的，不幸的是，这是可能发生的事情。但正如他们所说，对分离库进行定制。

---

这就是它不起作用的原因：正如你所看到的，这个问题来自于一场无法计划或预见的冲突，尽管我们非常愿意帮助，但我们无法解决这个问题

如果有帮助，这里是支持解决方案：

<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>

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

    _initTwitterFeed: function( $elm ) {

我们的团队已经检查了一下，看看我们这边是否有什么地方出了问题。然而，我很高兴地说，小部件运行正常

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

为了清楚起见，我们也在重复主题所有者告诉您的内容：主题没有错，我们也没有错由于这两种技术都不是专门为相互协作而开发的，不幸的是，这是可能发生的事情。但正如他们所说，对分离库进行定制。

---

这就是它不起作用的原因：正如你所看到的，这个问题来自于一场无法计划或预见的冲突，尽管我们非常愿意帮助，但我们无法解决这个问题

是的，它加载得很好，但是当这个嵌入脚本出现在我的页面中时会产生一个错误，当我从嵌入脚本中删除src时，错误就会消失？请检查控制台，您将从my-main-build.js（主题的js文件）中看到此错误：TypeError:$elm.airtifactFitVids不是函数。（在“$elm.airtifactFitVids（）”中，“$elm.airtifactFitVids”未定义）。是的，它已完全加载，但当此嵌入脚本出现在我的页面中时会生成错误，并且当我从嵌入脚本中删除src时错误消失？请检查控制台，您将从my-main-build.js（主题的js文件）中看到此错误：TypeError:$elm.airtifactFitVids不是函数。（在“$elm.airtifactFitVids（）”中，“$elm.airtifactFitVids”未定义）。