Barba.jS 中的頁面轉換后腳本未加載

Question

所以我有一個索引文件，其中包含很少的 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/指數測試。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);
        }, 
    }],

Answer 1

我會嘗試這樣的事情，在數組中添加所需的腳本，然后遍歷每個腳本並構建<script src="..."></script>字符串和 append 到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); }) }, }], })

Answer 2

以下是我嘗試過但仍然無法正常工作的方法。 另外，如何加載機車外部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);
      })
    }

  }],