使用BarbaJS時在頁面上重新加載JS腳本（轉換）更改

我正在嘗試在站點上實作barba.jsHubSpot。

考慮以下兩頁：

1. 資源
2. 顧客

在我當前的barba.js實作中，這是我正在經歷的當前流程：

1. 我訪問resources頁面（不是通過轉換到它，而是通過直接訪問它/resources）。
2. 在這一點上，我所有js的作業（slick-sliders，滾動功能等）
3. 然后我使用導航來訪問該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其中創建時，它會在頁面上（在script標簽中）吐出該模塊的 JS 。例如，下面是 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未啟動）。

uj5u.com熱心網友回復：

可以通過使用eval這里提到的方法解決：https : //github.com/barbajs/barba/issues/32

在關于該問題的評論中提到：

barba.hooks.after((data) => {
    let js = data.next.container.querySelectorAll('main script');
    if(js != null){
            js.forEach((item) => {
                console.log(js)
                eval(item.innerHTML);
            });
    }
});

uj5u.com熱心網友回復：

根據檔案

beforeEnter轉換的引數將是

https://barba.js.org/docs/advanced/hooks/#data-properties

因此，該container屬性在data.current和data.next屬性中均可用。在這種情況下，我們必須使用data.next與新頁面相關的腳本。

固定代碼#1

async beforeEnter(data) {

    $(data.next.container).find('script').each(function (i, script) {
        // ...
    })
}

固定代碼#2

async beforeEnter({ next }) {

    $(next.container).find('script').each(function (i, script) {
        // ...
    })
}

標籤：javascript 查询 阿贾克斯 巴尔巴伊斯

上一篇：在HTML表單提交上通過Ajax檢查Wordpress中是否存在電子郵件

下一篇：余額寶七日年化收益率是什么意思？