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

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.cachepage.href是未定义的，就重新加载页面。

​

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

​