使用平滑状态获取/保留上一页的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-如果有人知道从URL中获取鼻涕虫的更好方法，请告诉我！