在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. 异常+远程控制Linux-14

    什么是异常 a=8950/0              ZeroDivisioonError: division by zero print (a) ************** b = [1,2] ...

  2. pycharm使用技巧 + 调试程序-12

    Pycharm使用技巧 系出名门:JetBrains 集成开发环境:IDE 功能: Project视图.代码结构视图 代码导航 语法高亮.自动补齐.错误提示.自动修复 代码重构 主流开发框架的支持(D ...

  3. js 监听组合键盘事件

    有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete.up.down等 两位 ...

  4. day30-模块和包

    一.模块介绍 1.什么是模块 在python中,一个函数封装一个功能,当一个文件中包含很多个函数,而我们在其他程序中经常会用到这个文件中的功能时,那么我们就可以将这个包含多个函数的文件封装成一个模块, ...

  5. CrazySNS has on line - And you'll see why 1984 won't be like "1984."

    On May 10th, CrazySNS has on line , And you will see why 1984 won’t be like "1984."

  6. 解决运行wamp提示“MSVCR110.dll”丢失的问题！

    我在Windows系统上安装wampserver2.5 64位,安装到最后,总是提示丢失msvcr110.dll 解决办法: 到这个网站下载一个Visual C++ Redistributable f ...

  7. C++ 设置透明背景图片

    背景:            有两个图片,一个是目标背景图片, 一个是带有自身背景色彩的彩色图片            先将这彩色图片绘制到目标背景图片中, 这一步通过BITBLT就可实现.   但实 ...

  8. ceph部署手册

    CentOS7.2部署Luminous版Ceph-12.2.0 在CentOS7.2上安装部署Luminous版Ceph-12.2.0.由于ceph的Luminous版本默认使用bluestore作为 ...

  9. ubuntu18.04获取root权限并用root用户登录

    1.为root设置初始密码 (1)登录系统,打开终端,输入命令:sudo passwd root(使用root权限为root更改密码) (2)设置root密码(建议简单点,没必要那么复杂): (3)重 ...

  10. yii添加验证码 和重复密码

    <?phpnamespace frontend\models; use common\models\User;use yii\base\Model;use Yii; /** * Signup f ...