`
yiyu
  • 浏览: 186724 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

设置innerHTML后翻滚的奇怪现象

阅读更多
最近碰到一个奇怪的问题,记录一下。

处理过程是这样的,画面的onload事件中,通过ajax去后台读取数据,在ajax的响应函数中将数据写入一个div的innerHTML,然后卷动这个div一定的距离。

示意代码如下(body中onload="init()"):

function init() {
  ...

  //request是XMLHttpRequest
  request.onreadystatechange=function() {
    if(request.readyState==4) {
      if(request.status==200) {
        responseHandler(request);
      }
    }
  }
	
  request.open('GET', url, true);
  request.send(null);

  ...
}

function responseHandler(request) {
  document.getElementById("scrollDiv").innerHTML=request.responseText;
  scroll();
}

function scroll() {
  document.getElementById("scrollDiv").scrollTop = {一个数};
}



运行时发现,有时能滚到位,有时不能滚到位,ie8和ff3.5上都试过,现象一样。我估计是有时innerHTML虽然赋值完毕,但浏览器还没有处理完,所以指定的滚动位置越界,造成没滚到位。之后我苦苦找寻设置innerHTML后处理完成的事件也没找到,最后找到一个奇怪的办法可以解决这个问题,就是调用翻滚时不是直接调用scroll(), 而是这样:

setTimeout("scroll()", 0);


说它奇怪是因为延时虽然设为0,但每次都能正常翻滚到指定位置,屡试不爽。奇怪。
分享到:
评论
4 楼 yiyu 2010-01-28  
原来是因为这个呀,多谢znjq
3 楼 znjq 2010-01-28  
dom渲染和js不同步造成的,很多时候都是用settimeout来defer处理的,ext用到很多
2 楼 yiyu 2010-01-28  
但是为什么放到下一帧就可以正常翻滚了捏?
1 楼 02221021 2010-01-28  
不奇怪, 虽然是0. cpu也把它放到下一帧处理了

相关推荐

    innerHtml(转)

    3. **安全问题**:使用`innerHTML`设置用户输入的内容时,需要注意XSS(跨站脚本攻击)风险。不适当的使用可能导致恶意代码执行,因此需要进行适当的输入验证和编码。 4. **与innerText的区别**:`innerText`属性与...

    关于在innerHTML中JS不执行的问题

    了解这些方法后,你可以根据实际需求选择合适的方式来处理`innerHTML`中的JavaScript代码。在进行动态HTML插入时,考虑到性能、安全性和可维护性,建议尽可能避免使用`innerHTML`来插入包含JavaScript的HTML字符串。...

    innerHTML的简单应用

    innerHTML的简单应用

    js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法

    本文实例讲述了js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法。分享给大家供大家参考。具体分析如下: 问题描述: 网站中使用了一个js插件,设置innerHTML时,在IE8下报错“未知运行时错误”: ...

    innerHTML的使用

    innerHTML的使用document.getElementById("id").innerHTML = "contenttext";

    js中innerHTML与innerText的用法与区别

    // 设置innerHTML element.innerHTML = "<span style='color:red'>New Text</span>"; // 获取innerHTML console.log(element.innerHTML); // 输出: <span style="color:red">New Text ``` #### 2. `innerText` `...

    innerHTML和innerText的区别

    innerHTML 属性 innerHTML 属性用于获取 HTML 元素中的所有内容,包括 HTML 标签。例如,在上面的代码中,test.innerHTML 的值就是“<span style="color:red">test1</span> test2”,包括 HTML 标签。 innerHTML ...

    python教程-04-获取和设置标签内容(innerHTML).ev4.rar

    这个Python教程-04-获取和设置标签内容(innerHTML)将详细解释这些库的使用方法,通过观看`python教程-0-04-获取和设置标签内容(innerHTML).ev4.mp4`视频,你可以得到更直观的演示和实例,帮助你更好地理解和掌握这些...

    利用innerHTML实现隐显效果-两种实现方法

    这种方法的核心思想是,当需要隐藏元素时,将其innerHTML设置为空字符串;当需要显示元素时,恢复其原有的HTML内容。以下是一个简单的示例: ```html <!DOCTYPE html> <title>innerHTML隐显效果 ;">这是一...

    innerHTML-outerHTML-innerTEXT.txt

    根据提供的文件信息,我们可以深入探讨三个重要的DOM属性:`innerHTML`、`innerText`以及`outerHTML`。这些属性在Web开发中非常关键,用于获取或设置元素内部的内容。接下来将详细解析这些属性的功能、用途及差异。 ...

    解决ajax返回innerHTML中javascript不能运行问题

    解决 Ajax 返回 innerHTML 中 JavaScript 不能运行问题 在实际应用中,我们经常会遇到使用 Ajax 返回某一个网页的内容到模板页面的某一个 `<div>` 标签中显示的操作。如果返回的值仅仅是文本类数据,不会影响模板...

    通过改变innerHTML的内容,动态增加选择项

    这段代码会找到ID为`mySelect`的`<select>`元素,并在其现有的`innerHTML`后追加一个新的`<option>`元素。由于`innerHTML`会替换整个元素的内容,所以我们使用`+=`操作符,这意味着我们是在当前内容的基础上添加,而...

    关于innerHTML后丢失动态绑定的EVENT问题解决方法

    在JavaScript编程中,`innerHTML`属性是一个非常常用的方法,它允许我们方便地获取或设置HTML元素内部的HTML内容。然而,当使用`innerHTML`来替换元素内容时,一个常见的问题就是会丢失之前通过JavaScript动态绑定的...

    超全面javaweb第4天- 08 innerHTML属性

    超全面javaweb第4天-_08_innerHTML属性

    react-Innerself使用innerHTML将ReactRedux转换成50行代码

    标题中的“react-Innerself使用innerHTML将ReactRedux转换成50行代码”表明这是一个关于简化React和Redux集成的项目,它使用了一种叫做Innerself的技术。Innerself是一种轻量级的解决方案,通过innerHTML属性来实现...

    IE6/7/8中使用innerHTML清空元素,其子元素也被清空

    这个现象在其他现代浏览器中并不常见,因此了解这一问题对于解决跨浏览器兼容性问题至关重要。 `innerHTML`是JavaScript中一个非常实用的属性,用于获取或设置HTML元素内部的HTML内容。当你为一个元素设置`...

    innerHtml用法精解

    `innerText`与`innerHTML`都是用来获取或设置元素的文本内容,但它们之间存在一些关键区别: - **innerText**:仅获取或设置纯文本内容,忽略所有HTML标签。 - **innerHTML**:获取或设置完整的HTML内容,包括所有...

    前端教程:48 日期对象 定时器和innerhtml

    千锋Web前端教程_48_日期对象_定时器和innerhtml

Global site tag (gtag.js) - Google Analytics