En forçant un DOM actualiser dans Internet explorer après avoir javascript de manipulation du dom

Voici la situation. J'ai un peu de javascript qui ressemble à ceci:

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

Quand je fais cette soumission d'un formulaire d'action, et de l'exécuter à partir d'un non le navigateur IE, il est rapidement permute les deux travées de la visibilité et de courir le long de l'opération javascript. Si je fais cela dans IE il ne fait pas le swap, jusqu'à ce que après onSubmit() retourne complètement.

Je peux forcer un dom redessiner en coller une boîte d'alerte de la sorte:

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

Aussi, ce qui est évident jquery refactoring n'affecte pas l'IE comportement:

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

Ce problème existe sur IE8 et IE6. Est-il de toute façon à force d'un retraçage des DOM dans ces navigateurs?

  • Tout d'abord, que faites-vous dans la longRunningOperation?
  • Avez-vous essayé de déplacer la visibilité basculement de sa propre fonction?
  • longRunningOperation est en train de faire de la validation du formulaire. La forme est importante dans un petit sous-ensemble de cas.
InformationsquelleAutor Justin Dearing | 2009-09-09
  1. 2

    Votre longRunningOperation être appelée de façon asynchrone?

    • Vous avez fini par être de droite, mais avec un peu de travail. J'ai appelé l'opération longue à exécuter de manière asynchrone, a mon événement submit retourne false, et puis la async événement vraiment soumet mon formulaire. Cela a conduit à un comportement correct dans tous les navigateurs, mais il a fallu beaucoup de travail et se sent un peu encombrants.
    • Il pourrait se sentir encombrants, mais la meilleure conception de la côté client de votre application sera celle qui empêche le navigateur de réactivité. Lorsque vous démarrez long processus en cours, vous accrochez le navigateur (PAS!) donc, il est préférable de passer du temps à la conception de la façon de gérer les opérations asynchrones. De toute façon .. amusez-vous!
    InformationsquelleAutor misteraidan
  2. 17

    Mozilla (peut-être à-dire comme un bien) cache/délai d'exécution des modifications pour les DOM qui affectent l'affichage, de sorte qu'il est possible de calculer toutes les modifications à la fois au lieu de cela, à plusieurs reprises, après chaque instruction.

    Pour forcer une mise à jour (à force immédiate, synchrone, de brasage ou de la nouvelle disposition), votre javascript doit lire une propriété qui est affecté par le changement, par exemple l'emplacement de someSpan et otherSpan.

    (Ce Mozilla mise en œuvre détail est mentionné dans la vidéo Plus rapide HTML et CSS: Mise en page du Moteur Internes pour les Développeurs Web.)

    • intéressant. ne savais pas cela.
    • Je vais donner un essai dans la SUIS.
    • J'ai essayé ceci, mais ne pouvait pas le faire fonctionner.
    • Au moment 37:15 Mozilla la vidéo que j'ai cités, il suggère de "offset haut" ou "offset" de gauche " qui exigent que la mise en page à jour.
    • Merci sooo beaucoup!! Ce qui m'a sauvé. BTW, le gars qui fait la vidéo suce à parler en public.
    InformationsquelleAutor ChrisW
  3. 8

    À continuer ce que ChrisW dit:

    voici rinçage script de flash DOM, de sorte que vous n'avez pas à appeler alert(""); (trouvé à la 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;
   }
}

    Ça marche pour moi!!!
    Merci pour l'astuce.

    InformationsquelleAutor OKL
  4. 5

    J'ai eu ce problème en Chrome 21 glisser un mot qui a une lettre avec un jambage ("g"). Il a été en laissant une traînée de mites de la poussière derrière sur l'écran, ce qui ferait disparaître la prochaine fois que quelque chose de rafraîchissement de l'écran. ChrisW de la solution (l'interrogation d'une disposition sensible à la propriété) n'a pas fonctionné.

    Ce n'travail a été d'ajouter de 1 pixel blanc div en haut de la page, puis sur supprimer une milliseconde plus tard, en appelant la suite de la fonction à la fin de l'opération de glisser:

    //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);
}

    Remarque: Vous devez le retard. Tout simplement l'ajout et la suppression de la div ne fonctionne pas. Aussi, le div doit être ajouté au-dessus de la partie de la page qui doit être redessiné.

    • A cette solution mieux que de simplement l'appel de la fonction asynchrone comme je l'ai fait?
    • Eu un problème avec une actualisation de l'écran dans IE10 et cela a fait le tour, à la différence de tous les autres.
    • IE8 ici. C'est la seule solution qui a fonctionné pour moi. Merci.
    InformationsquelleAutor George
  5. 3

    Vous pouvez également vous envelopper à long terme de la fonction dans un setTimeout(function(){long terme();},1);

    InformationsquelleAutor
  6. 2

    élément.focus() fonctionne pour moi dans IE10

    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";
}
    InformationsquelleAutor nilesh bhaumik