在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. psutil模块

    python模块之psutil 一.psutil模块 1.介绍 psutil是一个跨平台库(http://pythonhosted.org/psutil/)能够轻松实现获取系统运行的进程和系统利用率( ...

  2. FB4.6项目迁移到4.7时 embed报错问题

    问题: 从FB4.6或更早版本移植到4.7的项目Embed标签,比如 [Embed(source="assets/BtnPlay.png")]   ,会报错 解决 方案: 4.7E ...

  3. linux集群时间同步搭建

    http://xstarcd.github.io/wiki/sysadmin/ntpd.html http://www.voidcn.com/blog/xuxudede1989/article/p-4 ...

  4. Windows下如何查看某个端口被谁占用

    开发时经常遇到端口被占用的情况,这个时候总是很令人抓狂,知道被哪个进程占用还好,结束就是了,要是不知道我们该怎么办呢? 我告诉大家一个方法,^_^. 1. 开始—->运行—->cmd,或者 ...

  5. wed开发基础--练习题

    一.HTML部分 本小节重点: 熟练使用div+span布局,知道div和span的语义化的意思 熟悉对div.ul.li.span.a.img.table.form.input标签有深刻的认知, 初 ...

  6. C++指针理解

    指针是C/C++编程中的重要概念之一,也是最容易产生困惑并导致程序出错的问题之一.利用指针编程可以表示各种数据结构,通过指针可使用主调函数和被调函数之间共享变量或数据结构,便于实现双向数据通讯:指针能 ...

  7. Python文件和目录模块介绍：glob、shutil、ConfigParser

    glob模块 查找符合特定规则的文件路径名,路径名可以使用绝对路径也可以使用相对路径.查找文件会使用到三个通配符,星号*,问号?和中括号[],其中"*"表示匹配0~n个字符, &q ...

  8. 13.Java国际化.md

    一.国际化开发概述 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...

  9. C# 无法识别的属性“targetFramework”。请注意属性名称区分大小写。错误解决办法

    “/CRM”应用程序中的服务器错误. 配置错误 说明: 在处理向该请求提供服务所需的配置文件时出错.请检查下面的特定错误详细信息并适当地修改配置文件. 分析器错误消息: 无法识别的属性“targetF ...

  10. pycahrm 激活

    Linux在/etc/hosts中添加 0.0.0.0 account.jetbrains.com就好,直接添加:0.0.0.0 account.jetbrains.comwindows的话没记错应该 ...