猿问

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

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

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



慕妹3146593
浏览 144回答 2
2回答

慕无忌1623718

就像在回调中重置滚动一样，beforeEnter您还需要从脚本中调用 init 方法，以在新页面加载时重置它们。afterEnter如果您需要访问新页面 dom，您也可以这样做。来自 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();    }  }]});
0

Qyouu

就我而言，这有帮助：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)})我<script class="main-script"></script>在 DOM 末尾有一个，并使用 barba.hook 删除它，然后再次添加它
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答