iframe白色闪光

时间:2012-11-01 19:28:48

标签: 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();
});

也没有做到这一点。 我试过的任何其他方法似乎已经过时了。让我感到困惑的是,上述2个解决方案有很多评论/反馈表明它们有效,但在Chrome中 - 我迄今为止唯一测试过的浏览器 - 我仍然遇到这个问题。

4 个答案:

答案 0 :(得分:0)

如果您想避免使用白色闪光灯,请不要使用指向HTML页面的链接进行导航,而是将两个页面放入2 <div>并在它们之间切换(这也是允许漂亮的动画。)

答案 1 :(得分:0)

我遇到了与动态生成的iframe类似的问题。在Chrome上,切换visibility删除了白色闪光,但仍然闪烁。在Safari上,切换display实际上引入了相关的iframe重绘错误。

最终为我工作的是切换opacity

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

答案 2 :(得分:0)

Chris Coyier 提供了一个非常优雅的解决方案,比放置 visibility 属性更好。他有一个 good explanation 为什么它更好,但简短的回答是“如果您使用 visibility,那么关闭 JavaScript 的用户将永远不会看到该 iframe”。

这是他的代码。将它放在您的 <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 被移除,一切正常。

我们都应该感谢他的这篇好文章,而不是我:)

答案 3 :(得分:-1)

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

即可