代码之家 › 专栏 › 技术社区 › Justin Dearing

javascript DOM操作后在Internet explorer中强制刷新DOM

dom internet-explorer javascript

Justin Dearing · 技术社区 · 15 年前

情况是这样的。我有一些javascript如下所示:

function onSubmit() {
    doSomeStuff();
    someSpan.style.display="block";
    otherSpan.style.display="none";
    return doLongRunningOperation;
}

当我将其设置为表单提交操作并从非IE浏览器运行时,它会快速交换两个跨度的可见性并运行长javascript操作。如果在IE中执行此操作,则在onSubmit()完全返回之前,它不会执行交换。

function onSubmit() {
    doSomeStuff();
    someSpan.style.display="block";
    otherSpan.style.display="none";
    alert("refresh forced");
    return doLongRunningOperation;
}

此外,jquery重构显然不会影响IE行为:

function onSubmit() {
    doSomeStuff();
    $("#someSpan").show();
    $("#otherSpan").hide();
    return doLongRunningOperation;
}

这种行为存在于IE8和IE6上。在这些浏览器中是否有强制重画DOM的方法?

6 回复 | 直到 15 年前

ChrisW 15 年前

Mozilla(也可能是IE)将缓存/延迟对DOM执行影响显示的更改,以便它可以一次计算所有更改,而不是在每个语句之后重复计算。

要强制更新(强制立即同步回流或重新播放),javascript应该读取受更改影响的属性,例如someSpan和otherSpan的位置。

(视频中提到了此Mozilla实现细节 Faster HTML and CSS: Layout Engine Internals for Web Developers .)

OKL 14 年前

这里是flash DOM的刷新脚本,所以您不必调用alert(“”);(载于 http://amolnw.wordpress.com/category/programming/javascript/

function flushThis(id){
   var msie = 'Microsoft Internet Explorer';
   var tmp = 0;
   var elementOnShow = document.getElementById(id);
   if (navigator.appName == msie){
      tmp = elementOnShow.parentNode.offsetTop  +  'px';
   }else{
      tmp = elementOnShow.offsetTop;
   }
}

谢谢你的提示。

George 12 年前

我在Chrome 21中遇到了这个问题,它拖拽了一个字母带有降格('g')的单词。它在屏幕上留下了一道蛾尘的痕迹,下次有什么东西刷新屏幕时,这些痕迹就会消失。ChrisW的解决方案(询问布局敏感属性)不起作用。

所做的工作是在页面顶部添加一个1像素的空白div,然后在一毫秒后通过在拖动操作结束时调用以下函数将其删除:

// Needed by Chrome, as of Release 21. Triggers a screen refresh, removing drag garbage.
function cleanDisplay() {
    var c = document.createElement('div');
    c.innerHTML = 'x';
    c.style.visibility = 'hidden';
    c.style.height = '1px';
    document.body.insertBefore(c, document.body.firstChild);
    window.setTimeout(function() {document.body.removeChild(c)}, 1);
}

注意:您需要延迟。只需添加和删除 div 不起作用。此外, div

Konrad Konrad 15 年前

您还可以将longterm函数包装在setTimeout中(function(){longterm();},1);

misteraidan 15 年前

可以异步调用longRunningOperation吗?

nilesh bhaumik 10 年前

function displayOnOff(){
    var elm = document.getElementById("myDiv");
    elm.style.display="block";
    elm.focus();
    for(var i=0; i<1000000; i++){
        console.log("waiting...............");
    }
    elm.style.display = "none";
}