如何在页面 (Barba.js) 之间重新初始化自定义 js 文件？
[英]How to reinit custom js files between pages (Barba.js)?
问题描述
I have Barba.js working on a website I am developing, I have debugged some other issues but I've noticed my jS isn't reinitialising between pages, which is not the intended behaviour.
我让 Barba.js 在我正在开发的网站上工作，我调试了一些其他问题，但我注意到我的 jS 没有在页面之间重新初始化，这不是预期的行为。 Please see my code below (I have removed my actual site content for the purposes of DRY):请参阅下面的代码（出于 DRY 的目的，我已删除了我的实际网站内容）：
index.html:索引.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: 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
});
}
}]
});
The problem as I understand it, is that each time the content from a new page is loaded into the DOM, it's not re-initialising my other scripts.据我了解，问题是每次将新页面中的内容加载到 DOM 中时，都不会重新初始化我的其他脚本。 Any ideas how I can re-init my other scripts correctly?任何想法如何正确地重新初始化我的其他脚本？
2 个解决方案
解决方案1
2 已采纳 2020-11-19 15:21:28
Like you do for resetting scroll in the beforeEnter callback you also need to call your init methods from your scripts to reset them on a new page load.就像您在beforeEnter回调中重置滚动一样，您还需要从脚本中调用 init 方法以在新页面加载时重置它们。 You also have afterEnter if you need to access the new page dom.如果您需要访问新页面 dom，您也可以使用afterEnter 。 From the barba.js doc :来自 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();
}
}]
});
I suggest you take a look at the lifecycle of barba.js to help you.我建议你看看barba.js的生命周期来帮助你。
解决方案2
1 2021-01-18 09:48:54
In my case this helped:就我而言，这有帮助：
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)
})
I have a <script class="main-script"></script> at the end of the DOM, and use barba.hook to remove it and then add it again我在 DOM 末尾有一个<script class="main-script"></script> ，并使用 barba.hook 将其删除，然后再次添加
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.