smoothstate.js

Question

我在我的网站上使用插件 smoothstate.js。出于某种原因，当我使用后退和前进按钮浏览页面时，后退按钮有时会停止工作。

URL变了但内容还是一样？

我已经检查了控制台显示的错误：

TypeError: Cannot read property 'state' of undefined

有人知道为什么会这样吗？就像我说的，大多数时候它工作正常，但突然就不行了。

我使用的代码是这样的：

$(function(){
  'use strict';
  var options = {
    prefetch: true,
    debug:true,
    cacheLength: 0,
    repeatDelay: 500,


    onStart: {
      duration: 0, // Duration of our animation
      render: function ($container) {
        // Add your CSS animation reversing class
        $container.addClass('is-exiting');

        // Restart your animation
        smoothState.restartCSSAnimations();
      }
    },

    onProgress: {
    // How long this animation takes
    duration: 0,
    // A function that dictates the animations that take place
    render: function ($container) {
                    $container.addClass('is-loading');

                    $('#progressBar').append('<div id="bar"></div>');   
                    var progress = '100%';

                    $('#bar').animate({
                        width: progress
                    }, 400);
    }
    },

    onReady: {
      duration: 0,
      render: function ($container, $newContent) {
        $container.removeClass('is-loading is-exiting');
        // Inject the new content
        $container.html($newContent);
      },
    },

    onAfter: function() {
            navbarAnimate();
            closeMenu();
            ImageSliders();
            initPhotoSwipeFromDOM('.gallery');
            ImageOverlay(); 
            window.parsePinBtns();
            backToTop();

    }
  },


  smoothState = $('#main').smoothState(options).data('smoothState');
});

Answer 1

我也运行遇到了这个问题，当页面没有完全加载时点击后退和前进按钮的速度太快就会发生这个问题。如果 page.cache[page.href] 未定义，我的一个 hacky 解决方案是重新加载页面。

/** Handles the popstate event, like when the user hits 'back' */
onPopState = function(e) {
  if(e.state !== null || typeof e.state !== undefined) {
    var url = window.location.href;
    var $page = $('#' + e.state.id); 
    var page = $page.data('smoothState');
 
 if (typeof(page.cache[page.href]) !== 'undefined') {
  var diffUrl = (page.href !== url && !utility.isHash(url, page.href));
  var diffState = (e.state !== page.cache[page.href].state); 

  if(diffUrl || diffState) {
    if (diffState) {
   page.clear(page.href);
    }
    page.load(url, false);
  }
 }
 else {
  //reload the page if page.cache[page.href] is undefined
  location.reload();
 }
    
  }
},

smoothstate.js - 后退按钮有时不起作用？

smoothstate.js - back button sometimes doesn't work?

javascript

jquery