实现流畅的iFrame导航

Achieve smooth iFrame navigation

本文关键字：iFrame 导航 实现      更新时间：2023-09-26

我有一个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'});
 });

任何帮助(在移动设备上！(获得更平稳的过渡都将不胜感激！

如果我不想纠正您的问题，您可以尝试更改不透明度，而不是可见性。有了这个改变，你就可以给它一个短暂的渐变。这可以通过CSS或jQuery实现，无论您喜欢什么。

相关文章：