如何在页面 (Barba.js) 之间重新初始化自定义 js 文件？

Question

我让 Barba.js 在我正在开发的网站上工作，我调试了一些其他问题，但我注意到我的 jS 没有在页面之间重新初始化，这不是预期的行为。 请参阅下面的代码（出于 DRY 的目的，我已删除了我的实际网站内容）：

索引.html：

<head>
<!--- Default Page Values -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png" />
<title>TEST.</title>
<!--- Load Local Styles -->
<link type="text/css" rel="stylesheet" href="fonts/fontsauce.css" />
<link rel="stylesheet" href="css/globals.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/videoModal.css">
<!--- End Load Local Styles -->
<!--- Load Local Scripts -->
<script src="js/lib/jQuery/jquery-3.5.1.min.js"></script>
<script src="js/lib/anime/anime.min.js"></script>
<script src="js/lib/parallax/parallax.min.js"></script>
<script src="js/lib/barba/2.9.7/barba.umd.js"></script>
<!--- End Load Local Scripts -->
<!--- Load External Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ==" crossorigin="anonymous"></script>
<!--- End Load External Scripts -->
</head>

<body id="barba-wrapper" data-barba="wrapper">
   <main class="barba-container" data-barba="container" data-barba-namespace="home">

      // all my website content //

   </main>

   <script src="js/introParams.js"></script>
   <script src="js/parallaxParams.js"></script>
   <script src="js/content.js"></script>
   <script src="js/videoModal.js"></script>
   <script src="js/pageTransitions.js"></script>

</body>

pageTransitions.js：

barba.init({

    transitions: [{
        name: 'diffuse-transition',
        leave(data) {
            return gsap.to(data.current.container, {
                opacity: 0
            });
        },

        beforeEnter: ({ next }) => {
            window.scrollTo(0, 0);
        },

        enter(data) {
            return gsap.from(data.next.container, {
                opacity: 0
            });
        }
    }]
});

据我了解，问题是每次将新页面中的内容加载到 DOM 中时，都不会重新初始化我的其他脚本。 任何想法如何正确地重新初始化我的其他脚本？

Answer 1

就像您在beforeEnter回调中重置滚动一样，您还需要从脚本中调用 init 方法以在新页面加载时重置它们。 如果您需要访问新页面 dom，您也可以使用afterEnter 。 来自 barba.js 文档：

barba.init({
  views: [{
    namespace: 'home',
    beforeEnter() {
      // re-init/reset script default function on before page load
      myScriptInit();
    },
    afterEnter() {
      // refresh parallax on new page content
      parallax.refresh();
    }
  }]
});

我建议你看看barba.js的生命周期来帮助你。

Answer 2

就我而言，这有帮助：

barba.hooks.after(() => {
const bottomDOM = document.getElementsByTagName("body")[0]
const newScript = document.createElement("script")
const oldScript = document.querySelector(".main-script")
newScript.src = "js/main-dist.js"
newScript.className = "main-script"
oldScript.remove()
bottomDOM.appendChild(newScript)
})

我在 DOM 末尾有一个<script class="main-script"></script> ，并使用 barba.hook 将其删除，然后再次添加

如何在页面 (Barba.js) 之间重新初始化自定义 js 文件？

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-11-19 15:21:28

解决方案2
1 2021-01-18 09:48:54

如何在页面 (Barba.js) 之间重新初始化自定义 js 文件？

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-11-19 15:21:28

解决方案2 1 2021-01-18 09:48:54

解决方案1
2 已采纳 2020-11-19 15:21:28

解决方案2
1 2021-01-18 09:48:54