• 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";

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

  • 相关阅读:
    Quartz.net 定时任务在IIS中未按时执行
    扩展方法
    mysql 实用语句
    jquery each map
    js匿名函数多时注意
    ASP.NET MVC3调用分部视图
    eclipse快捷键
    regular 点滴
    适配器模式
    php代码实现简单图片下载
  • 原文地址:https://www.cnblogs.com/liujinming/p/10881991.html
Copyright © 2020-2023  润新知