今天用一个很龌龊的办法解决了 iframe 切换页面会闪烁的问题

在网页中使用 iframe 链接直接将页面显示在iframe中,这个方法在很多浏览器会在点击链接后iframe瞬间变成全白,由此造成闪烁,目前据我所见,除了 FireFox 之外所有浏览器都会这样

虽然这是浏览器行为,属于正常程序范畴,不过来自上面的压力下最后还是通过一个很龌龊的办法避免了闪烁 = =
具体代码就不写了,简单说说思路:

iframe闪烁其实载入页面的正常现象,就好像直接点击链接在新窗口打开页面,开始都是白色的。

载入新页面的动作是在点击链接后马上开始的,虽然页面还没有载入,但是 iframe 的 src 已经跳到了新页面,自然同时老页面已经消失,这样会造成短暂的内容中空期,解决这个的办法就是让新页面先载入,老页面却不消失,直到新页面载入完成再替换掉老页面。

我用的方法就是建立一个临时 iframe 并且藏起来,在其中载入新页面,当这个页面载入完成后删除老的iframe,将临时 iframe 显示出来,这样就避免了中空期的出现,在新页面载入完成前老页面一直显示着,删除元素和元素显示是非常快速的 JS 操作,不会有闪烁的感觉,虽然方法很龌龊…但是的确解决了问题。

隐藏 iframe 的办法,我不是直接display: none,而是设置宽高都为1px,然后设置position: absolute,这样页面是不可能看到这个临时 iframe 的,至于为什么如此,是因为 iframe 可能会有一些 JS 操作涉及到内部元素的宽高等判断和变化,如果直接 display:none 会获得错误的值(例如负数)。

11月22日添加:

在实际测试后发现这个方法是好用,但是会造成IE下的内存占用激增,这是IE本身的bug,删除一个DOM元素后如果窗口不关闭并不会释放内存,由此造成内存泄露,所以干脆直接放两个iframe,轮流显示,好处是不会改变DOM树,基本上就不存在上面说的内存泄露问题了,实际测试情况良好…不过…方法更龌龊了= =

6 thoughts on “今天用一个很龌龊的办法解决了 iframe 切换页面会闪烁的问题

    1. 这个不是切换层了。如果用AJAX,隐藏和显示层是不会有瞬间白屏造成闪烁这种情况出现的(当年AJAX不就被称为无闪烁么)

      不过我认为大页面切换是不适合用AJAX,所以在用iframe的时候解决闪烁的问题,不过现在这样也有个缺点,就是浏览器history会乱掉,后退功能就有问题了(AJAX其实也会有这个问题,当然网上也有不少方法是来解决这个的),考虑解决后退的问题后发出来一起研究一下^___^

  1. 你只要在切换的时候,将iframe的src设置成javascript:false 就行了,这样浏览器的内存就不会激增了。
    因为iframe有内存泄漏啊,只有这样强推一下,呵呵。

    1. 我提到的内存泄露和你这个可能不太一样,文中提到的是js操作DOM时引起的内存泄露,你这个iframe释放时的内存泄露,有时间我测试看看

    1. 可以通过ajax,一次性覆盖全部的 body,当然这样限制很多,很麻烦
      普通切换URL白屏是肯定的,这是浏览器行为,目前只发现 firefox 在切换的时候不会出现白屏,或者说白屏不明显

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.