js强制浏览器重新渲染页面

今天遇到一个浏览器兼容性问题,大致原因就是在用某一个前端框架做分页时,由于是使用的jQuery的hide和show方法,其本质是为某个iframe加上一个display=none,这在chrome中是没有问题的,但是在ie中却会出现白屏的情况,也就是display被设为none的页面,在调用show方法时没有被展示出来。

这个问题一直被定性为浏览器兼容性问题,也就是所使用的前端框架不能够兼容个ie,但是我偶然发现把ie浏览器窗口化/最大化或者仅仅用鼠标拖动的方式调整iframe的大小时,原本白屏的页面又回来了。

同时跟踪代码发现所有的js代码都是能够准确无误的执行的。

于是我猜测是渲染问题。

百度找到这么一篇博客:https://blog.csdn.net/cofesun/article/details/7894802

这篇博客中有一句话引起了我的注意:

js访问到以上dom属性的时候,它都会先渲染dom文档,再获得相关的属性。所以,就起到了强制渲染的作用。

其中“以上dom属性”就包括页面的大小。这跟我调整浏览器窗口大小会导致消失的页面重新出现是一致的。

于是我在相应的地方加入了对offsetWidth的访问,可惜并没什么卵用,就算js能把offsetWidth的值输出来,该白屏的还是白屏,并没有起到重新渲染的效果。

为什么我改变浏览器窗口大小的时候页面会重新渲染呢,于是我大胆猜测,真正能引起浏览器重新渲染的动作是对offsetWidth的改动,而不是访问。

于是我在合适的地方加上了这么三行代码:

    var temp=document.body.offsetWidth;
    temp=temp%2==0?temp+1:temp-1;
    document.getElementsByTagName("body")[0].style.width  =temp+"px";

果然不再白屏了,唯一的问题是点击分页插件的时候框架会有微不可查的形变,至今仍然没有找到好的解决方案。

posted @ 2019-05-17 16:24  轻红  阅读(4247)  评论(0编辑  收藏  举报