使用SmoothState獲取/保留上一頁的URL

Question

我正在使用https://github.com/miguel-perez/smoothState.js並試圖使用上一頁的URL創建if/else語句。我嘗試將路徑名存儲在cookie中，但我也需要使用當前的路徑名，並且由於某種原因它僅記錄了cookie。

我希望這解釋了什麼是我想要做的事：

(function($) { 
'use strict'; 
var $page = $('#main'), 
    options = { 
     debug: true, 
     prefetch: true, 
     cacheLength: 0, 
     onBefore: function($currentTarget, $container) { 

      // Keep the current page's pathname. Specifically 
      // check if it's the sites index 

     }, 
     onStart: { 
      duration: 1000, 
      render: function ($container) { 
       $('#tempWrapper').remove(); 

       // Check if the new page is the site's index or not 
       // and run a specific function 

       if (window.location.pathname == "/") { 
        smoothState.restartCSSAnimations(); 
       } else { 
        $("html, body").animate({ scrollTop: "0px" }); 
        $(".carousel").remove();     

        var $newContainer = $container.clone();    
        $newContainer.attr("id", "tempWrapper"); 
        $newContainer.css({ 
         position:'absolute', 
         top:$container.offset().top, 
         width:$container.css("width"), 
         maxHeight:"100vh", 
         overflow:"hidden" 
        }); 

        // $container.empty(); 
        $container.before($newContainer); 
        $('#inner-content').removeClass('entering'); 

        var element = $('#inner-content', $newContainer); 
        setTimeout(callAnimation(element, true), 0); 
       } 
      } 
     }, 
     onReady: { 
      duration: 1000, 
      render: function ($container, $newContent) { 
       $container.html($newContent); 

       // This is where it gets tricky: I need to check if 
       // the previous page was the site's index. If the 
       // previous page was a subpage, it does an animation. 

       if (window.location.pathname == "/") { 
        // Index (home) page 
       } else { 
        // Do animations 
        var element = document.getElementById($container[0].id).getElementsByClassName('move')[0]; 
        callAnimation(element); 
       } 
      } 
     } 
    }, 
    smoothState = $page.smoothState(options).data('smoothState'); 
})(jQuery); 

我內聯我的筆記，任何幫助是極大的讚賞。我也嘗試使用document.referrer，但顯示空白;我假設這是因爲沒有點擊頁面刷新。

Answer 1

我剛纔寫的是同樣的東西。看看以下內容：

(function($) { 
'use strict'; 

var state = { 
    source: '', 
    bearing: '' 
}; 

var wp = { 
    homeUrl: 'http://www.example.com/' 
}; 

/** 
* Get the slug from a full URL. 
* @param string url 
* @return string 
*/ 
function getSlug(url) { 
    // Remove home URL 
    url = url.replace(new RegExp(wp.homeUrl, 'g'), ''); 

    // Remove file extensions 
    url = url.replace(/\.[^/.]+$/, ''); 

    return ('' === url || 'index' === url) ? '/' : url; 
} 

/** 
* Check if a journey is from a page to another page. 
* @param string|array source The page you are coming from. 
* @param string|array bearing The page you are going to. 
* @return boolean 
*/ 
function isJourney(source, bearing) { 
    // Convert array params into strings 
    if (Array.isArray(source)) { 
     source = source.join(); 
    } 

    if (Array.isArray(bearing)) { 
     bearing = bearing.join(); 
    } 

    return -1 !== source.indexOf(state.source) && -1 !== bearing.indexOf(state.bearing); 
} 

var $page = $('#main'), 
    options = { 
     debug: true, 
     prefetch: true, 
     cacheLength: 0, 
     onBefore: function($currentTarget, $container) { 

      // Keep the current page's pathname. Specifically 
      // check if it's the sites index 
      var smoothState = $container.smoothState().data('smoothState'); 

      // Store where you're coming from and where you're going 
      state.source = getSlug(smoothState.href); 
      state.bearing = getSlug($currentTarget.get(0).href); 

     }, 
     onStart: { 
      duration: 1000, 
      render: function ($container) { 
       $('#tempWrapper').remove(); 

       // Check if the new page is the site's index or not 
       // and run a specific function 

       if ('/' == state.bearing) { 
        smoothState.restartCSSAnimations(); 
       } else { 
        $("html, body").animate({ scrollTop: "0px" }); 
        $(".carousel").remove();     

        var $newContainer = $container.clone();    
        $newContainer.attr("id", "tempWrapper"); 
        $newContainer.css({ 
         position:'absolute', 
         top:$container.offset().top, 
         width:$container.css("width"), 
         maxHeight:"100vh", 
         overflow:"hidden" 
        }); 

        // $container.empty(); 
        $container.before($newContainer); 
        $('#inner-content').removeClass('entering'); 

        var element = $('#inner-content', $newContainer); 
        setTimeout(callAnimation(element, true), 0); 
       } 
      } 
     }, 
     onReady: { 
      duration: 1000, 
      render: function ($container, $newContent) { 
       $container.html($newContent); 

       // This is where it gets tricky: I need to check if 
       // the previous page was the site's index. If the 
       // previous page was a subpage, it does an animation. 

       if ('/' == state.source) { 
        // Index (home) page 
       } else { 
        // Do animations 
        var element = document.getElementById($container[0].id).getElementsByClassName('move')[0]; 
        callAnimation(element); 
       } 
      } 
     } 
    }, 
    smoothState = $page.smoothState(options).data('smoothState'); 
})(jQuery); 

將您的主頁URL放在wp.homeUrl變量中。添加腳本文件時，可以使用wp_localize_script完成此操作，如果您不想對其進行硬編碼。

然後，您可以檢查狀態變量以查看您來自哪個頁面（source）或將要（bearing）。

我也拋出了我編寫的快速isJourney()函數，它可以讓您快速檢查是否要從特定頁面轉到另一個特定頁面。它支持兩個參數中的數組，因此您可以測試是否從一個頁面轉到一組頁面。

希望這會有所幫助！

PS - 如果有人知道更好的方式從網址中獲得slu let讓我知道！