我的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中 - 我迄今为止唯一测试过的浏览器 - 我仍然遇到这个问题。
答案 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 = '­<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标记