在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. Django--URL(路由层)

    一.django 静态文件配置 在配置文件中settings.py STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR ...

  2. 配置maven访问nexus，配置项目pom.xml以发布maven项目到nexus中

    maven访问nexus有三种配置方法,分别为: 项目pom.xml,优先级最高: user的settings.xml,优先级中,未在pom.xml中配置repository标签,则使用这个配置: m ...

  3. ubuntu 安装 oracle sql developer

    安装java-jdk 这一部分教程很多,可按照网上教程进行安装 安装sqldeveloper 下载 sqldeveloper Linux RPM http://www.oracle.com/techn ...

  4. 尚硅谷springboot学习6-eclipse创建springboot项目的三种方法（转）

    方法一 安装STS插件 安装插件导向窗口完成后,在eclipse右下角将会出现安装插件的进度,等插件安装完成后重启eclipse生效 新建spring boot项目 项目启动 方法二 1.创建Mave ...

  5. python中time模块和datetime模块

    time模块和datetime模块 时间分为三种模式(time 模块) 时间戳   (time.time()) 格式化字符串 (time.strftime(%Y-%m-%d %H:%M:%S %p)) ...

  6. Java相关文章

    servlet/filter/listener/interceptor区别与联系 web.xml配置详解 在Eclipse中使用JUnit4进行单元测试(初级篇) 单点登录原理与简单实现 spring ...

  7. 跨域（四）——document.domain

    浏览器有一个合法的性质:一个页面可以设置document.domain为当前子域或比当前子域更高级的域.一般顶级就到了根域,如果设置为其他域,浏览器就会报权限错误. 利用这个性质,我们可以通过设置do ...

  8. 【BUG记录】记一次游戏越来越卡的BUG

    U3D的MOBA项目,测试过程中,10分钟以后,游戏帧率开始缓慢下降,约3-5分钟后,由60帧下降到小于10帧,编辑器模式. 打开profiler,看到CPU占用非常高,每帧都有24K的GC, 时间占 ...

  9. 关于STRUCT优化的一个点

    在西山居的这篇U3D cheatsheet中,提到: c12. 确保 struct 实现了 Equals() 和 GetHashCode() 这怎么理解? 首先,看下system.object.equ ...

  10. Haskell语言学习笔记（81）Data.Typeable

    Data.Typeable 利用 Data.Typeable,可以打印动态类型信息. class Typeable (a :: k) where typeRep# :: TypeRep a typeR ...