在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. Navicat Premium 连接Oracle 数据库（图文教程）

    一.需要准备的软件 Navicat premium 32位 官方下载地址:http://www.navicat.com.cn/products/navicat-premium Instant Clie ...

  2. beyondCompare工具使用

    1.下载beyondcompare  (从官网下载) 2.载入.class文件比对 参见: beyond compare 对class文件反编译及比较  (https://blog.csdn.net/ ...

  3. struts2中的constant介绍之struts.objectFactory与spring的整合

    struts2提供给我们更为灵活的设计,他的很多东西都是可以手动配置的,下面介绍下他的一些 常用的constant作用和配置 struts.objectFactory这个属性用于说明Struts2的 ...

  4. eclipse中导入java类失败的问题

    在 Eclips 开发时,新建了一个 Dynamic Web Project,在运行jsp文件时tomcat报错: org.apache.jasper.JasperException: Unable ...

  5. html：块级元素和行内元素的特点

    display:block: 块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理. 块级元素width.height.padding.mar ...

  6. python语言中的数据类型之元组

    数据类型 元组       tuple 元组:不可变类型 用途:元组就是一个不可变的列表,当需要存不改动的值时可用元组 定义方式:在()内用逗号分隔开多个任意类型的元素 t=(1,2.2,'aa',( ...

  7. Redis学习笔记一（Redis的详细安装及Linux环境变量配置和启动）

     Redis Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 我使用的是下面这个版本: 若没有资源的话,我在 ...

  8. Eclipse开发Web常见异常

    1.java.lang.IllegalStateException: Web app root system property already set to different value 错误原因: ...

  9. unity Flash Animation Toolset插件使用

    插件网站:http://matov.me/flash-animation-toolset/ 1.在unity上打开资源商店,Window -> Asset Store -> 搜索Flash ...

  10. 【转】JS windows.open()详解

    window.open(url, name, features, replace)  Arguments - 参数 url  可选字符串参数,指向要在新窗口中显示的文档的URL.如果省略该参数,或者参 ...