Question

我正在使用https://github.com/miguel-perez/smoothState.js并尝试使用上一页的网址创建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);

将您的主页网址放在wp.homeUrl变量中。如果您不想对其进行硬编码，则可以在添加脚本文件时使用wp_localize_script来完成此操作。

然后，您可以检查状态变量，以查看您来自哪个页面（source）或将要进入（bearing）。

我还编写了一个快速isJourney()函数，它可以让您快速检查是否从特定页面转到另一个特定页面。它支持任一参数中的数组，因此您可以测试从一个页面到一组页面。

希望这有帮助！

PS - 如果有人知道从URL获取slug的更好方法让我知道！

使用SmoothState获取/保留上一页的URL

1 个答案: