今天遇到一个浏览器兼容性问题,大致原因就是在用某一个前端框架做分页时,由于是使用的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";

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

js强制浏览器重新渲染页面的更多相关文章

  1. Javascript 强制浏览器渲染Dom文档

    在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...

  2. 多进程浏览器、多线程页面渲染与js的单线程

    线程与进程 说到单线程,就得从操作系统进程开始说起.在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位.任务调度采用的是时间片轮转的抢占式调度方式,而进程 ...

  3. 从进度条和alert的出现顺序来了解浏览器 UI 渲染 & JS进程

    项目里有一个需求是在上传文件的时候需要显示进度条,那么理所当然的在上传完成后就需要提示用户上传完毕并且更新进度条. 之前的预期表现是,上传完毕后,先更新进度条到100%,再alert出提示,所以代码如 ...

  4. 强制IE使用最高版本引擎渲染页面,避免默认使用IE7引擎导致的页面布局混乱及其它问题

    背景 基于Asp.net MVC的一个Intranet web application, 现象 Application发布到服务器端后,在客户端IE访问页面布局混乱,并有javascript报错 原因 ...

  5. 160826、浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘

    一.浏览器渲染页过程描述   1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...

  6. 浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘。

    一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DOM树 ...

  7. 浏览器渲染页面的时候,不同的script块之间的关系

    浏览器渲染页面时,当读到script元素的时候,浏览器中的js引擎会分多个script代码块来读取,不同的script代码出错互不影响,但是由于script中的变量作用域是全局,所以前面代码块声明的变 ...

  8. 转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

    作者:德来 segmentfault.com/a/1190000004292479 如有好文章投稿,请点击 → 这里了解详情 一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如: ...

  9. 网页性能优化:防止JavaScript、CSS阻塞浏览器渲染页面

    网页中引用的外部文件: JavaScritp.CSS 等常常会阻塞浏览器渲染页面.假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载,那么浏览器渲染 ...

随机推荐

  1. MVC学生管理系统-阶段I(显示学生列表)

    项目源码 :https://download.csdn.net/download/weixin_44718300/11091042 目录 MVC设计模式 前期准备: NO01:新建一个index.js ...

  2. 全面掌握Nginx配置+快速搭建高可用架构 一 Centos7 安装Nginx

    Nginx官网 http://nginx.org/en/linux_packages.html#stable 配置yum 在etc的yum.repos.d目录下新增nginx.repo 将内容copy ...

  3. MD5碰撞和MD5值(哈希值)相等

    md5的碰撞 0e开头的md5和原值: s878926199a 0e545993274517709034328855841020 s155964671a 0e342768416822451524974 ...

  4. 快速幂的类似问题(51Nod 1008 N的阶乘 mod P)

    下面我们来看一个容易让人蒙圈的问题:N的阶乘 mod P. 51Nod 1008 N的阶乘 mod P 看到这个可能有的人会想起快速幂,快速幂是N的M次方 mod P,这里可能你就要说你不会做了,其实 ...

  5. Comet OJ - Contest #15(B: 当我们同心在一起 )

    题目链接 题目描述 平面上有 nn 个坐标相异的点,请问当中有多少组非共线的三个点,这三个点的 外心 也在这 nn 个点之中? 输入描述 第一行有一个正整数 nn 代表平面上的点数. 接下来有 nn  ...

  6. Ansible常见错误解析

    背景 由于工作中经常用到ansible,所以整理了常用的ansible错误及原因分析,方便自己也方便别人参考. 1.shell 模块常见错误 1.1 使用shell遇到"msg": ...

  7. 201771010123汪慧和《面向对象程序设计Java》第十八周实验总结

    一.总复习纲要 1. Java语言特点与开发环境配置(第1章.第2章) 2. Java基本程序结构(第3章) 3. Java面向对象程序结构(第4章.第5章.第6章) 4. 类.类间关系.类图 5. ...

  8. 51nod 1080:两个数的平方和

    1080 两个数的平方和 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 给出一个整数N,将N表示为2个整数i j的平方和(i <= j),如果 ...

  9. Q1:Two Sum

    1. Two Sum 官方的链接:1. Two Sum Description : Given an array of integers, return indices of the two numb ...

  10. hdu 5147 Sequence II【树状数组/线段树】

    Sequence IITime Limit: 5000/2500 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem ...