Barba.jS 中的页面转换后脚本未加载

Question

So I have one index file that has few js files are included like Gsap & Barba JS. But I have one inner page that includes some extra js files such as locomotive.js & OWLcarousel.js and please note that these two Js files (locomotive.js & OWLcarousel.js) are not included on index page as they are not required. The issue is the inner page opens after completing the index page transition but without loading these two JS files (locomotive.js & OWLcarousel.js). As a result both locomotive scrolling & OWL carousel are not working. However, If I'll refresh the inner page once then these two Js files (locomotive.js & OWLcarousel.js) are loading and everything works fine. So how to load JS files in Barba.Js for inner pages?

Update: I have created a minimal demo and you can see that inner page is not loading the JS and CSS of Locomotive and also OWL carousel if click on heading text on homepage and navigate to inner. But if refresh the page then both locomotive & owl carousel are working fine in inner page. How to fix this? I have added the suggested change to the JS file ( https://bootstrap-awesome.com/barba-test1f/js/main-test.js ) Demo Link: https://bootstrap-awesome.com/barba-test1f/index-test.html

So I tried to load the additional JS files in the same below format but nothing happens. Can anyone guide me with this please?

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

I would try something like this, where you add the scripts you want in an array, then loop through each one and build a <script src="..."></script> string and append to the next container.

 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

The below is what I have tried but still not working. Also, how to load Locomotive external CSS?

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

Demo: 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);
      })
    }

  }],