我正在尝试在网站上实现barba.jsHubSpot。
问题HubSpot在于它使我们与标签中的自定义js相关forms或js相关。modules<script><script>
因此，目前，在我的barba实现中，例如，如果我转换到带有HubSpot表单的页面，该表单将不会显示并且不会js与我的模块相关（例如slick js，它们也不起作用。
使用下面定义的钩子（来自文档），我添加了一个ajax调用以尝试重新加载scripts已src定义的钩子。但是，我无法测试这是否有效，因为js我的自定义模块不起作用。
| 财产 | 描述 |
|---|---|
| 数据.当前 | 当前页面相关 |
| 数据.next | 下一页相关 |
| 数据触发器 | 触发转换的链接 |
问题是，有没有办法让我在scripts没有src定义的情况下重新加载？
这是我当前的实现：
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("test");
},
}]
});这是一个工作演示
按着这些次序：
- 点击
page 1。注意HubSpot表单是如何加载的。 - 点击
page 2 - 注意
slick slider模块如何不工作 - 现在刷新
page 2，你会看到slick工作正常。 - 导航到
page 1，您会看到该表单现在不起作用。
问题的视觉：
