實現流暢的iFrame導航

Question

我有一個內部帶有導航的iFrame，這意味着在其中導航時會更改iframe src。 iFrame中的導航代碼類似於：

window.location = "new URL";

在這種情況下，用戶體驗確實很差，尤其是在移動設備上（當iFrame更改其來源時，我會看到“閃爍” /“閃爍”）

我試圖實現類似於Chris Coyier在此處的功能 ，方法是在導航時向父級觸發一個postMessage，告訴父級在更改src時隱藏/顯示iFrame。 諸如此類（這在父postMessage事件內部）：

var $iFrame = $('iframe');

$iFrame.css({'visibility': 'hidden'});

$iFrame.load(function(){
    $iFrame.css({'visibility': 'visible'});
});

這將起作用，但結果並不更好-當iFrame被我的新代碼隱藏可見時，我仍然可以看到此“閃爍”。

我的第三次嘗試包括擁有一個新的iFrame並為其提供新的源，只有在加載后才使其可見並隱藏第一個。 這也沒有改善結果：

 var $iFrame = $('.iFrame1');
 var $iFrame2 = $('.iFrame2');

 $iFrame2.attr('src', encodeURIComponent(url));

 $iFrame2.load(function(){
     $iFrame2.css({'visibility': 'visible'});
     $iFrame.css({'visibility': 'hidden'});
 });

非常感謝您（在移動設備上！）獲得更平滑過渡的任何幫助！

Answer 1

如果我無法正確解決您的問題，則可以嘗試更改不透明度，而不是可見性。 進行此更改后，您可以對其進行短暫的淡入淡出過渡。 無論您喜歡什么，都可以使用CSS或jQuery實現。