Question

我在其中有一个带导航的iFrame，这意味着在其内部导航时会更改iframe src。 iFrame中的导航代码类似于：

window.location = "new URL";

虽然这很有效但用户体验非常糟糕，特别是在移动设备上（当iFrame更改源代码时，我可以看到“闪烁”/“闪烁”）

我尝试通过在导航时向父级触发postMessage来实现与Chris Coyier here类似的东西，告诉父级在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实现，无论你喜欢什么。

实现流畅的iFrame导航

1 个答案: