在Cordova+Framework7开发Hybrid App时，在iPhone 7上遇到一个诡异的现象(Chrome浏览器、Android都正常)：js修改手风琴中的input文本框的值后，但页面仍然显示旧指，而用js读取却显示新值。
 
当浏览器在执行一段js代码的过程中，一般不会立即更新渲染dom文档，而是在整段代码执行完毕的时候才去更新dom文档。
浏览器这么实现，是为了尽可能提高性能。但这种实现有时候会给我们带来一些意外的负面效果。
 
js访问以下 Dom属性的时候，浏览器都会先渲染Dom文档，再获得相关的属性。从而强制浏览器立即渲染Dom文档。
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight

Javascript 强制浏览器渲染Dom文档的更多相关文章

  1. Javascript - DOM文档对象模型

    文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...

  2. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  3. <JavaScript>“浏览器模式”和“文档模式”之间的区别

    只有IE浏览器中才会有“浏览器模式”和“文档模式”,兼容性视图涉及两个重要的功能便是“浏览器模式[browser mode]”和“文档模式[document mode]”,在IE8/IE9中按F12键 ...

  4. Javascript学习8 - 脚本化文档(Document对象)

    原文:Javascript学习8 - 脚本化文档(Document对象) 每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Doc ...

  5. 前端开发—BOM对象DOM文档对象操作

    BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...

  6. ready是先执行的，load后执行，DOM文档的加载步骤

    在jq中在文档载入完毕后有这几种方式去执行指定函数: $(document).ready(function() { // ...代码... }); //document ready 简写 $(func ...

  7. 将XML解析成DOM文档

    在支持html5的浏览其中,可以使用标准解析器DOMParser对象进行解析html或者xml等字符串 var data = '<div></div>'; var tmp = ...

  8. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  9. Jsoup库 解析DOM文档

    DOM文档包括 HTML, XML等等 下载: http://jsoup.org/download Jsoup 获取数据的方式 //html 文本, url, 本地html String html = ...

随机推荐

  1. win10 解决 WMI Provider Host 占用CPU过高问题

    真心懒得写Blog,但是之前遇到这个问题在网上查了一大圈,几乎一摸一样都是让关防火墙等服务的,然而对于我来说,并没有毛线用. 无奈,直接去微软社区查,还真有一篇问题解决方案.顺手翻译一下放在这里,希望 ...

  2. JSdom操作内容，样式，属性

    <p> JavaScript 能够直接写入 HTML 输出流中: </p> <script> document.write("<h1>This ...

  3. TensorFlow 辨异 —— tf.add(a, b) 与 a+b（tf.assign 与 =）、tf.nn.bias_add 与 tf.add（转）

    1. tf.add(a, b) 与 a+b 在神经网络前向传播的过程中,经常可见如下两种形式的代码: tf.add(tf.matmul(x, w), b) tf.matmul(x, w) + b 简而 ...

  4. opencv对手写数字进行无黏连切割

    //src:待分割的二值图,最大值为255 //segMat:分割好的每个图片 //算法:判断连通域,有几个连通域就会分割成几个子图片 //用途:手写数字识别中进行无黏连数字的分割 void getC ...

  5. Eclipse里的代码光标变成一个黑色块

    以前经常在编写程序是不知到碰到键盘上的那个键了,或是那几个组合键了,使得Eclipse里的代码光标变成一个黑色块:在这个状态下,光标不在活动自如,只能一直往后写代码,就不想平时的 " | & ...

  6. godep 包管理

    go get -u -v github.com/tools/godep  godep save

  7. pandas 常用清洗数据（一）

    数据源获取: https://www.kaggle.com/datasets 1. Look at the some basic stats for the ‘imdb_score’ column: ...

  8. 虚拟机 安装 CentOS7

    初次接触CentOS,最好是在虚拟机中安装: 因为CentOS的安装选项有很多,不理解的情况下千万不要在物理机上尝试: 不然可能出现这种情况:安装好以后,只有黑色的屏幕,只能在里面敲命令:这对于新手来 ...

  9. python进程之守护进程

    标签(空格分隔): 守护进程 主进程创建子进程,然后将该进程设置成守护自己的进程,守护进程就好比崇祯皇帝身边的老太监,崇祯皇帝已死老太监就跟着殉葬了: 关于守护进程需要强调两点: 其一:守护进程会在主 ...

  10. metasploit framework（三）：exploit模块

    exploit模块 分为主动,被动exploit 主动exploit:攻击者(通常是客户端)主动发起连接请求,然后发送exploit给被攻击者(通常是服务器端) 被动exploit:被攻击者(通常是客 ...