頁面在加載新頁面之前淡出（但跳回到視圖中）+ 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');位指的是我的全頁面導航。單擊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); 
    } 
});