Javascript 启动引导程序时出现“Tour”错误

我有一个用Drupal8和Bootstrap3构建的站点。当用户访问站点时，巡更将自动开始。巡更结束后，将在访问者的浏览器中放置一个cookie，以便在用户重新加载页面时巡更不会开始

网站：

我的问题是：

我在左边的菜单Committer la visite上创建了一个按钮，这样用户就可以手动访问巡演了

每次我手动重新启动巡更时，都会不时出现一个bug。它必须在不同的页面上重新启动几次才能看到错误

如何纠正这一点

以下是我在bs-tour.js文件末尾添加的代码：

(function ($, _, Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.bsTour = {
    attach: function (context, settings) {
      $(window).on('load', function (event) {
        try
        {
          var tourOptions = $(drupalSettings.bs_tour.tour)[0];
          var tips = tourOptions.steps;
          var keyboard = tourOptions.keyboard;
          var debug = tourOptions.debug;
          var steps = [];

          for (var i = 0; i < tips.length; i++) {
            if ($(tips[i].element).length > 0) {
              tips[i].backdropPadding.top = parseInt(tips[i].backdropPadding.top);
              tips[i].backdropPadding.right = parseInt(tips[i].backdropPadding.right);
              tips[i].backdropPadding.bottom = parseInt(tips[i].backdropPadding.bottom);
              tips[i].backdropPadding.left = parseInt(tips[i].backdropPadding.left);

              switch (tips[i].backdrop) {
                case "0":
                  tips[i].backdrop = false;
                  break;

                case "1":
                  tips[i].backdrop = true;
                  break;
              }

              steps.push(tips[i]);
            }
          }

          if (steps.length) {
            var tour = new Tour({
              debug: debug,
              keyboard: keyboard,
              template: "<div class='popover tour'>\
              <div class='arrow'></div>\
              <h3 class='popover-title'></h3>\
              <div class='popover-content'></div>\
              <div class='popover-navigation'>\
              <button class='btn btn-default' data-role='prev'>« " + Drupal.t('Prev') + "</button>\
              <span data-role='separator'>|</span>\
              <button class='btn btn-default' data-role='next'>" + Drupal.t('Next') + " »</button>\
              <button class='btn btn-default' data-role='end'>" + Drupal.t('Skip tour') + "</button>\
              </div>\
              </div>",
            });

            // Add steps to the tour
            tour.addSteps(steps);

            // Initialize the tour
            tour.init();

            // Start the tour
            tour.start();

            // Restart the tour
            var startTour = $('#bs-tour-restart');
            startTour.click(function (event) {
              event.preventDefault();
              var tourObject = drupalSettings.bs_tour.currentTour;
              if (tourObject && tourObject._options.steps.length) {
                tourObject.start(true);
              }
            });

            // Close collapse navigation
            $('#bs-tour-restart').click(function () {
            $('#navbar-collapse-first, #navbar-collapse-second').collapse('hide');
            });

            // Add tour object to drupalSettings to allow manipulating tour from other modules.
            // Example: drupalSettings.bs_tour.currentTour.end();
            drupalSettings.bs_tour.currentTour = tour;
          }

        } catch (e) {
          // catch any fitvids errors
          window.console && console.warn('Bootstrap tour stopped with the following exception');
          window.console && console.error(e);
        }
      });
    }
  };

})(window.jQuery, window._, window.Drupal, window.drupalSettings);

这是我的bs-tour.js文件：

(function ($, _, Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.bsTour = {
    attach: function (context, settings) {
      $(window).on('load', function (event) {
        try
        {
          var tourOptions = $(drupalSettings.bs_tour.tour)[0];
          var tips = tourOptions.steps;
          var keyboard = tourOptions.keyboard;
          var debug = tourOptions.debug;
          var steps = [];

          for (var i = 0; i < tips.length; i++) {
            if ($(tips[i].element).length > 0) {
              tips[i].backdropPadding.top = parseInt(tips[i].backdropPadding.top);
              tips[i].backdropPadding.right = parseInt(tips[i].backdropPadding.right);
              tips[i].backdropPadding.bottom = parseInt(tips[i].backdropPadding.bottom);
              tips[i].backdropPadding.left = parseInt(tips[i].backdropPadding.left);

              switch (tips[i].backdrop) {
                case "0":
                  tips[i].backdrop = false;
                  break;

                case "1":
                  tips[i].backdrop = true;
                  break;
              }

              steps.push(tips[i]);
            }
          }

          if (steps.length) {
            var tour = new Tour({
              debug: debug,
              keyboard: keyboard,
              template: "<div class='popover tour'>\
              <div class='arrow'></div>\
              <h3 class='popover-title'></h3>\
              <div class='popover-content'></div>\
              <div class='popover-navigation'>\
              <button class='btn btn-default' data-role='prev'>« " + Drupal.t('Prev') + "</button>\
              <span data-role='separator'>|</span>\
              <button class='btn btn-default' data-role='next'>" + Drupal.t('Next') + " »</button>\
              <button class='btn btn-default' data-role='end'>" + Drupal.t('Skip tour') + "</button>\
              </div>\
              </div>",
            });

            // Add steps to the tour
            tour.addSteps(steps);

            // Initialize the tour
            tour.init();

            // Start the tour
            tour.start();

            // Restart the tour
            var startTour = $('#bs-tour-restart');
            startTour.click(function (event) {
              event.preventDefault();
              var tourObject = drupalSettings.bs_tour.currentTour;
              if (tourObject && tourObject._options.steps.length) {
                tourObject.start(true);
              }
            });

            // Close collapse navigation
            $('#bs-tour-restart').click(function () {
            $('#navbar-collapse-first, #navbar-collapse-second').collapse('hide');
            });

            // Add tour object to drupalSettings to allow manipulating tour from other modules.
            // Example: drupalSettings.bs_tour.currentTour.end();
            drupalSettings.bs_tour.currentTour = tour;
          }

        } catch (e) {
          // catch any fitvids errors
          window.console && console.warn('Bootstrap tour stopped with the following exception');
          window.console && console.error(e);
        }
      });
    }
  };

})(window.jQuery, window._, window.Drupal, window.drupalSettings);

开始巡演时，背景为黑色：

---

我不确定，但当我开始访问时，我认为它会在“右菜单”中结束

我查看了你的js，发现还有其他步骤，正好是8步。 一件事是，您应该实现一个滚动到功能，以打开的步骤为目标

所以我滚动到底部，然后当我看到“下一步”按钮是灰色时，我完成了巡演，巡演是“完成”，我无法重现您的问题

我认为应该使用“onShown”选项使窗口滚动到目标元素

最后，我认为你的问题只是因为巡演没有结束而引起的

也许你可以用这样的代码进行测试，它没有经过测试，但它是类似的

        var tour = new Tour({
          debug: debug,
          onShown: function(tour){
              var target = tour._options.steps[tour.getCurrentStep()].element;

                  $('html, body').animate({
                     scrollTop: $(target).offset().top
                   }, 2000);
          },
          keyboard: keyboard,
          template: "<div class='popover tour'>\
          <div class='arrow'></div>\
          <h3 class='popover-title'></h3>\
          <div class='popover-content'></div>\
          <div class='popover-navigation'>\
          <button class='btn btn-default' data-role='prev'>« " + Drupal.t('Prev') + "</button>\
          <span data-role='separator'>|</span>\
          <button class='btn btn-default' data-role='next'>" + Drupal.t('Next') + " »</button>\
          <button class='btn btn-default' data-role='end'>" + Drupal.t('Skip tour') + "</button>\
          </div>\
          </div>",
        });

---

我更新了问题。新代码解决了这个问题。但我仍然有旅游的问题，它不会自动滚动页面。在上面的代码中，在哪里放置“onShown”？