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');位指的是我正在使用的整页导航。在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);
    }
});

在新页面加载+ Safari后退按钮问题

1 个答案: