iframe白色闪光灯

我在iframe内有一个左手导航，有两个项目在两个页面之间切换。有时会有白色闪光灯，有时没有。

到目前为止我尝试过的一些方法：

<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';">

没有解决问题。

jQuery('#jobs-frame').load(function(){
    $(this).show();
});
jQuery('#primary a').click(function(){ 
    //alert('hello');
    jQuery('#jobs-frame').hide();
});

也没有解决问题。我尝试过的任何其他方法似乎已经过时了。令人困惑的是，这些上述两个解决方案有很多评论/反馈说它们有效，但是在Chrome中 - 到目前为止，我已经对此进行了测试 - 我仍在遇到这个问题。

我在动态生成的iFrame上也有类似的问题。在Chrome上，切换visibility删除了白色闪光灯，但仍然闪烁。在Safari上，切换display实际引入了相关的IFRAME重新粉刷错误。

最终为我工作的是切换opacity：

<iframe style="opacity: 0;" onload="this.style.opacity = 1;">`

如果要避免'白色闪光灯'，请不要使用链接到html页面，而是将两个页面放入2 <div> s并在它们之间切换（这也允许漂亮动画）。

克里斯·科伊尔（Chris Coyier）提供了一种非常优雅的解决方案，比放置visibility属性更好。他有一个很好的解释，为什么它更好，但简短的答案是"关闭JavaScript的用户，永远不会看到Iframe"。如果您使用visibility。

这是他的代码。将其放入您的<head>中，并确保将window.onload功能与您的功能相结合，如果您已经有一个。

(function () {    
    var div = document.createElement('div'),
        ref = document.getElementsByTagName('base')[0] || 
              document.getElementsByTagName('script')[0];
    div.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>';
    ref.parentNode.insertBefore(div, ref);
    window.onload = function() {
        div.parentNode.removeChild(div);
    }        
})();

它可以通过在页面上插入CSS来起作用，这使所有iframe都看不见，因此粉丝也不可见。当窗口加载时，CSS被删除并且一切都很好。

我们都应该感谢他的这篇不错的文章，而不是我：）。

只需将style="background-color: #000000;"提供给html标签

相关内容

最新更新

热门标签：