0

所以我有一个索引文件，其中包含很少的 js 文件，例如 Gsap 和 Barba JS。但是我有一个内页，其中包含一些额外的 js 文件，例如 locomotive.js 和 OWLcarousel.js，请注意这两个 Js 文件（locomotive.js 和 OWLcarousel.js）不包含在索引页面中，因为它们不是必需的。问题是内页在完成索引页面转换后打开，但没有加载这两个 JS 文件（locomotive.js 和 OWLcarousel.js）。结果，机车滚动和 OWL 旋转木马都不起作用。但是，如果我刷新一次内页，那么这两个 Js 文件（locomotive.js 和 OWLcarousel.js）正在加载并且一切正常。那么如何在 Barba.Js 中加载内页的 JS 文件呢？

更新：我创建了一个最小的演示，如果单击主页上的标题文本并导航到内部，您可以看到内部页面没有加载机车的 JS 和 CSS 以及 OWL 轮播。但是如果刷新页面，那么机车和猫头鹰旋转木马在内页都可以正常工作。如何解决这个问题？我已将建议的更改添加到 JS 文件 ( https://bootstrap-awesome.com/barba-test1f/js/main-test.js ) 演示链接：https ://bootstrap-awesome.com/barba-test1f/索引-test.html

因此，我尝试以以下相同的格式加载其他 JS 文件，但没有任何反应。有人可以指导我吗？

barba.init({
  views: [{
        namespace: 'home',
        beforeEnter({ next }) {

        // load your script
        let script = document.createElement('script');
        script.src = '<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>'; 
script.src = '<script src="js/owl/owl.carousel.js"></script>';
        next.container.appendChild(script);
        }, 
    }],

在此处输入图像描述

网络控制台中的错误

更新 @wouch

以下是我尝试过但仍然无法正常工作的方法。另外，如何加载机车外部CSS？

JS：bootstrap-awesome.com/barba-test1f/js/main-test.js

演示：https ://bootstrap-awesome.com/barba-test1f/index-test.html

views: [{
    namespace: 'home',
    beforeEnter({ next }) {
      // Script URLs to load
      let pageScriptSrcs = [
        'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js',
        'js/custom-scroll.js',
        'js/owl/owl.carousel.js',
        'js/owl/owl-custom.js'
      ]
      
      pageScriptSrcs.forEach(scriptSrc => {
        let script = '<script src="' + scriptSrc + '"><\/script>';
        console.log(script);
        next.container.appendChild(script);
      })
    }
    },
    {
    namespace: 'projdetailpage',
    beforeEnter({ next }) {
      // Script URLs to load
      let pageScriptSrcs = [
        'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js',
        'js/custom-scroll.js',
        'js/owl/owl.carousel.js',
        'js/owl/owl-custom.js'
      ]
      
      pageScriptSrcs.forEach(scriptSrc => {
        let script = '<script src="' + scriptSrc + '"><\/script>';
        console.log(script);
        next.container.appendChild(script);
      })
    }

  }],
4

1 回答 1

0

我会尝试这样的事情，在数组中添加所需的脚本，然后遍历每个脚本并构建一个<script src="..."></script>字符串并附加到next容器中。

barba.init({
  views: [{
    namespace: 'home',
    beforeEnter({ next }) {
      // Script URLs to load
      let pageScriptSrcs = [
        'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js',
        'js/owl/owl.carousel.js'
      ]
      
      pageScriptSrcs.forEach(scriptSrc => {
        let script = '<script src="' + scriptSrc + '"><\/script>';
        console.log(script);
        next.container.appendChild(script);
      })
    },
  }],
})

于 2021-12-30T17:17:05.457 回答