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";
果然不再白屏了,唯一的问题是点击分页插件的时候框架会有微不可查的形变,至今仍然没有找到好的解决方案。
js强制浏览器重新渲染页面的更多相关文章
- Javascript 强制浏览器渲染Dom文档
在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...
- 多进程浏览器、多线程页面渲染与js的单线程
线程与进程 说到单线程,就得从操作系统进程开始说起.在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位.任务调度采用的是时间片轮转的抢占式调度方式,而进程 ...
- 从进度条和alert的出现顺序来了解浏览器 UI 渲染 & JS进程
项目里有一个需求是在上传文件的时候需要显示进度条,那么理所当然的在上传完成后就需要提示用户上传完毕并且更新进度条. 之前的预期表现是,上传完毕后,先更新进度条到100%,再alert出提示,所以代码如 ...
- 强制IE使用最高版本引擎渲染页面,避免默认使用IE7引擎导致的页面布局混乱及其它问题
背景 基于Asp.net MVC的一个Intranet web application, 现象 Application发布到服务器端后,在客户端IE访问页面布局混乱,并有javascript报错 原因 ...
- 160826、浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘
一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...
- 浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘。
一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DOM树 ...
- 浏览器渲染页面的时候,不同的script块之间的关系
浏览器渲染页面时,当读到script元素的时候,浏览器中的js引擎会分多个script代码块来读取,不同的script代码出错互不影响,但是由于script中的变量作用域是全局,所以前面代码块声明的变 ...
- 转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制
作者:德来 segmentfault.com/a/1190000004292479 如有好文章投稿,请点击 → 这里了解详情 一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如: ...
- 网页性能优化:防止JavaScript、CSS阻塞浏览器渲染页面
网页中引用的外部文件: JavaScritp.CSS 等常常会阻塞浏览器渲染页面.假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载,那么浏览器渲染 ...
随机推荐
- 转: 十大Intellij IDEA快捷键
Intellij IDEA中有很多快捷键让人爱不释手,stackoverflow上也有一些有趣的讨论.每个人都有自己的最爱,想排出个理想的榜单还真是困难.以前也整理过Intellij的快捷键,这次就按 ...
- 优秀的linux学习网站
从网络上拷贝别人归纳的列表. Linux优秀网站列表 国内 http://www.chinaunix.net/ 国内最火爆的unix/linux论坛 http://www.linuxforum.net ...
- request和response的setCharacterEncoding()方法
1.pageEncoding=”UTF-8”的作用是设置JSP编译成Servlet时使用的编码.2.contentType=”text/html;charset=UTF-8”的作用是指定服务器响应给浏 ...
- Ubuntu16.04 faster-rcnn+caffe+gpu运行环境配置以及解决各种bug
https://blog.csdn.net/flygeda/article/details/78638824 本文主要是对近期参考的网上各位大神的博客的总结,其中,从安装系统到跑通程序过程中遇到的各种 ...
- 给vector对象添加元素的方法
#include<iostream> #include<vector> using namespace std; int main() { //初始化10个元素,每个值都为0 ...
- 刷题46. Permutations
一.题目说明 题目是46. Permutations,给一组各不相同的数,求其所有的排列组合.难度是Medium 二.我的解答 这个题目,前面遇到过类似的.回溯法(树的深度优先算法),或者根据如下求解 ...
- git push的时候.gitignore不起作用的解决方法
问题的原因 这是因为在你添加.gitignore之前已经进行过push操作,有些文件已经纳入版本管理了. 解决方法 我们就应该先把本地缓存删除,然后再进行git的push,这样就不会出现忽略的文件了. ...
- C++多态性与虚函数
派生一个类的原因并非总是为了继承或是添加新的成员,有时是为了重新定义基类的成员,使得基类成员“获得新生”.面向对象的程序设计真正的力量不仅仅是继承,而且还在于允许派生类对象像基类对象一样处理,其核心机 ...
- Codeforces Round #599 (Div. 2) Tile Painting
题意:就是给你一个n,然后如果 n mod | i - j | == 0 并且 | i - j |>1 的话,那么i 和 j 就是同一种颜色,问你最大有多少种颜色? 思路: 比赛的时候,看到 ...
- 小程序使用wxs 解决wxml保留2位小数问题
1.出现溢出表现 从图中可以看到数字超出了很长长度.代码里面是如下这样的.为什么在0.35出现?或者一些相成的计算出现? 而 0.34却不会. 0.41 也会出现,好像是二进制运算出现结果. data ...