javascript - 在新页面加载之前页面淡出(但跳回 View )+ Safari 后退按钮问题

Question

当点击链接并重定向到新页面之前，我使用了一些 JavaScript 来淡出我的页面。我遇到的问题是页面淡出，但在页面重定向之前它很快又回到 View 中。由于这是指页面重定向，因此很难提供 CodePen 示例。

这似乎是由于我包含的 newpage 函数而发生的。我不认为我最初使用过这个，但我需要将其放入，因为有时使用浏览器后退按钮时，特别是在 iOS safari 上，它会显示一个空白页面。

这是我当前正在使用的脚本:

$(document).ready(function() {

    $('[href*="website-url.com/"]').click(function(event) {
        event.preventDefault();
        newLocation = this.href;
        $('body').fadeOut(150, newpage);
    });

    function newpage() {
        window.location = newLocation;
        $('body').show().removeClass('show-nav').addClass('hide-nav');

        setTimeout(function() {
            $('body').removeClass('hide-nav');
        }, 500);
    }
});

.removeClass('show-nav').addClass('hide-nav'); 位指的是我正在使用的全页导航。单击 safari 中的后退按钮会加载默认打开导航的页面。这是为了强制它关闭它 - 不过，它在隐藏之前确实会“跳”一点，并且您确实会瞥见它，即使只是一瞬间。

希望有人能帮忙解决这个问题!

Answer 1

经过一些测试，我找到了解决方案:只需添加:

$("body").html("");

这会清空 body ，所以什么也不会出现。

这是您的代码:

$(document).ready(function() {

    $('[href*="website-url.com/"]').click(function(event) {
        event.preventDefault();
        newLocation = this.href;
        $('body').fadeOut(1500, newpage);
    });

    function newpage() {
        $("body").html("");
        window.location = newLocation;
        $('body').show().removeClass('show-nav').addClass('hide-nav');

        setTimeout(function() {
            $('body').removeClass('hide-nav');
        }, 500);
    }
});