在新页面加载+ Safari后退按钮问题之前，页面淡出（但跳回到视图中）

Question

在重定向到新页面之前单击链接时，我会使用一些javascript来淡出我的页面。 我遇到的问题是页面淡出然后它会在页面重定向之前快速返回到视图中一瞬间。 由于这指的是页面重定向，因此很难提供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'); bit指的是我正在使用的整页导航。 在safari中单击后退按钮会加载默认打开导航的页面。 这是为了强迫它关闭它 - 尽管它再次在它被隐藏之前确实'跳了一下'并且你确实可以看到它，如果只是在几分之一秒内。

希望有人可以帮忙解决这个问题！

Answer 1

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

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

这会清空身体，所以什么都不会出现。

这是你的代码：

$(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);
    }
});