Le déplacement d'un nœud de la fenêtre principale à la fenêtre contextuelle provoque HierarchyRequestError

Question

J'ai un problème avec JavaScript. Je ne peux pas savoir pourquoi IE lance une erreur HierarchyRequestError dans la partie suivante du code. Je crée ma carte (par exemple GoogleMap ou OpenStreetMap) dans l'écran principal dans un conteneur div. Ce noeud a l'ID "map-canvas". En appuyant sur un bouton, je veux déplacer cette carte dans une fenêtre contextuelle. Par conséquent, je charge un fichier HTML contenant uniquement un conteneur div avec l'ID "mapCol" et un conteneur div avec l'ID "map-canvas-pop". Dans ce conteneur est une image de chargement par défaut.

Lorsque le DOM est prêt dans la fenêtre contextuelle, je veux déplacer le nœud de carte de la fenêtre principale dans la fenêtre contextuelle. Lors de l'utilisation de Firefox ou Chrome, cela fonctionne correctement sans erreur. Juste avec l'InternetExplorer cela provoquera une exception.

La première partie du code qui peut être important pour la question:

/** 
* Moving the map to a popup window or back to main screen 
*/ 
var _My = function(){ 
//[...] some other stuff 
    var __mapWindowHandler = null; 
    var __clonedMap = null; 

    //Attach the onclose and onresize events when popup DOM is ready 
    var __attachEventToPopup = function(){ 
     if (!__mapWindowHandler || !__mapWindowHandler.MyPopup || !__mapWindowHandler.MyPopup.setResizeEvent){ 
      window.setTimeout(function(){ 
       __attachEventToPopup(); 
      }, 250); 
      return; 
     } 
     //MyPopup is a "JS-Class" within the popup HTML Structure 
     __mapWindowHandler.MyPopup.setResizeEvent(function(){ 
      if (_My.Map.sizeUpdate 
       && typeof(_My.Map.sizeUpdate) === 'function') 
      _My.Map.sizeUpdate(); 
     }); 


     if (typeof(__mapWindowHandler.onbeforeunload) === 'object'){ 
      __mapWindowHandler.onbeforeunload = function(event){ 
       __toggleMapPopup(false, true); 
      }; 
     } 
    }; //__attachEventToPopup() 

    //Opens a popup and move the current map with all configurations into that window 
    //or remove popup and put the map back to the main page 
    var __toggleMapPopup = function(popupAlreadyStarted, isCloseEvent){ 
     if (!isCloseEvent && ((popupAlreadyStarted && popupAlreadyStarted === true) || __mapWindowHandler === null)){ 
      //Map ius not in popup or popup is closed 
      var container; 
      var w, h; 
      if (!popupAlreadyStarted || popupAlreadyStarted !== true) { 
       container = document.getElementById('map-canvas'); 
       w = container && container.offsetWidth > 100 ? (container.offsetWidth || 800) : 800; 
       h = container && container.offsetHeight > 300 ? (container.offsetHeight || 600) : 600; 
       __mapWindowHandler = window.open('index.php?getMapHtmlStructure=true',"MyMapWindow", "width=" + w + ",height=" + h + ",left=10,top=10,scrollbars=no,resizable=yes,menubar=no,location=no,dependent=yes,toolbar=no,status=no"); 
      } 
      __mapWindowHandler.focus(); 

      var mapElem = __mapWindowHandler.document.getElementById('map-canvas-pop'); 
      if (!mapElem){ 
       window.setTimeout(function(){ 
        __toggleMapPopup(true); 
       }, 1000); 
       return; 
      } 
      var width = document.getElementById('rightCol').style.width; 
      container = document.getElementById('map-canvas'); 

      //backup the map-node to be able to restore it when popup isn't accessable anymore 
      __clonedMap = container.cloneNode(); 
        /* PART 1 */ 

Cette partie va jeter l'exception dans IE:

    /* PART 1 */ 
      try { 
       __mapWindowHandler.document.getElementById('mapCol').appendChild(container); 
       //This throws a "HierarchyRequestError" in IE 
       //It works fine with Firefox and Chrome 
      } 
      catch (e){ 
       alert('Map could not be moved to popup.' + "\n" + e.message); 
       __mapWindowHandler.close(); 
       __mapWindowHandler = null; 
       return; 
      } 
        /* PART 2 */ 

Le reste du code:

    /* PART 2 */ 
      __attachEventToPopup(); 
     } //if (!isCloseEvent [...]) 
     else { 
      //Map is in popup window 
      if (__mapWindowHandler){ 
       var container = __mapWindowHandler.document ? (__mapWindowHandler.document.getElementById('map-canvas-pop') || __mapWindowHandler.document.getElementById('map-canvas') || __clonedMap) : __clonedMap; 
       document.getElementById('rightCol').innerHTML = ''; 
       document.getElementById('rightCol').appendChild(container); 
       __mapWindowHandler.close(); 
       __mapWindowHandler = null; 
      } 
      else 
       document.getElementById('rightCol').appendChild(__clonedMap); 

      if (_My.Map.sizeUpdate 
        && typeof(_My.Map.sizeUpdate) === 'function') 
       _My.Map.sizeUpdate(); 
     } //else 
    }; //__toggleMapPopup() 

//[...] some other stuff 
} //_My() 

Quelqu'un peut-il m'aider à résoudre le problème?

Answer 1

Je faisais face au même problème avant et découvert, que la seule solution pour résoudre ceci est d'éviter le clonage de nœud réel, mais de retravailler le composant avec la carte à sérialiser. (Lorsque vous travaillez avec des fenêtres différentes, il est également une meilleure pratique que le clonage de l'élément.)

De mon expérience avec le clonage, il y avait des problèmes avec les écouteurs d'événements de transmission, certaines des propriétés des éléments, des références, etc.

Le problème IE est causé par le fait que IE ne permet pas de copier les nœuds entre les documents. (Dans les versions antérieures, vous aussi pas été en mesure d'ajouter un élément DOM créé dans un document à un autre.)

Answer 2

Juste essayer d'enlever le contenant avant annexant à nouveau:

//backup the map-node to be able to restore it when popup 
isn't accessable anymore 
     container.parentElement.removeChild(container); 
     __clonedMap = container.cloneNode(); 

Hope it helps!