javascript - 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();
	}
    
  }
},