我正在尝试在网站上实现barba.jsHubSpot。
考虑以下两页：
- 资源
- 顾客
使用我当前barba.js的实现，这是我正在经历的当前流程：
- 我访问该
resources页面（不是通过转换到它，而是通过直接访问它/resources）。 - 在这一点上，我所有
js的工作（slick-sliders，滚动功能等） - 然后我使用导航访问
customers页面。页面加载，但该页面的所有js特定模块和表单都不起作用。
简而言之，js对于我transition不工作的页面。
为了解决这个问题，我要做的是重新scripts加载container beforeEnter().
见下文：
$(function() {
function delay(n){
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
barba.init({
sync: true,
prefetchIgnore: true,
debug: true,
transitions: [{
async leave(data){
const done = this.async();
await delay(200);
done();
},
async beforeEnter({ next, container }) {
$(container).find('script').each(function (i, script) {
var $script = $(script);
$.ajax({
url: $script.attr('src'),
cache: true,
dataType: 'script',
success: function () {
$script.trigger('load');
}
});
});
},
async enter(data){
let scrollX = 0
let scrollY = 0
barba.hooks.leave(() => {
scrollX = barba.history.current.scroll.x;
scrollY = barba.history.current.scroll.y;
});
window.scrollTo(scrollX, scrollY);
},
async once(data){
console.log("done");
},
}]
});
});但是，我的电流beforeEnter()仍然产生相同的结果。有什么办法吗？
编辑
为了提供更多详细信息，此barba.js实现适用于HubSpot站点。当您在其中创建custom modules时，它会在页面上（在标签中）HubSpot吐出该模块的 JS 。script例如，下面是 JS 在页面上的呈现方式：
<script>
// js from custom module is here
</script>
<script src=".../scripts-min.min.js"></script>因此，当barba执行转换时，我需要重新加载所有具有src和内联呈现的 JS（如自定义模块）。
基于User863反馈的最新方法
$(function() {
function delay(n){
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
function reload_scripts(param){
$(param).find('script').each(function (i, script) {
var $script = $(script);
$.ajax({
url: $script.attr('src'),
cache: true,
dataType: 'script',
success: function () {
$script.trigger('load');
console.log("scripts loaded");
}
});
});
}
barba.init({
sync: true,
prefetchIgnore: true,
debug: true,
transitions: [{
async leave(data){
const done = this.async();
await delay(200);
done();
},
async beforeEnter(data) {
reload_scripts(data.next.container);
},
async beforeEnter({ next }) {
reload_scripts(next.container);
},
async enter(data){
// scroll to top of page when transitioning
let scrollX = 0
let scrollY = 0
barba.hooks.leave(() => {
scrollX = barba.history.current.scroll.x;
scrollY = barba.history.current.scroll.y;
});
window.scrollTo(scrollX, scrollY);
},
async once(data){
console.log("transition complete");
},
}]
});
});当前行为：与以前相同（页面更改时模块的脚本被破坏）。例如，带有slick slider's 的模块不起作用（slick未启动）。