將主節點從主窗口移動到彈出窗口導致HierarchyRequestError

Question

我有一個JavaScript問題。我找不到爲什麼IE在下面的代碼部分拋出HierarchyRequestError。 我在div容器內的主屏幕中創建地圖（例如GoogleMap或OpenStreetMap）。該節點的ID爲「map-canvas」。通過按下一個按鈕，我想將該地圖移動到一個彈出式窗口中。因此，我加載了一個HTML文件，其中只包含一個ID爲「mapCol」的div容器和一個ID爲「map-canvas-pop」的div容器。在該容器中默認是加載圖像。

當彈出窗口中的DOM準備就緒時，我想將主窗口中的地圖節點移動到彈出窗口中。 使用Firefox或Chrome時，它可以正常工作，沒有任何錯誤。只要使用InternetExplorer，它將導致異常。

代碼的第一部分可能對這個問題很重要：

/** 
* 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 */ 

這部分將拋出異常的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 */ 

的其餘代碼：

    /* 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() 

任何人都可以幫助我解決問題嗎？

Answer 1

我之前面對同樣的問題，發現只有解決方案是爲了避免實際的節點克隆，但是用map重做組件是可序列化的。 （當使用不同的窗口工作，也不同於成分克隆更好的做法。）

我與克隆的經驗有與傳輸事件監聽器的問題，有些元素的屬性，引用等

的IE問題引起由於IE不允許在文檔之間複製節點。 （在舊版本中，你也沒能在一個文件中創建一個DOM元素添加到另一個文件。）

Answer 2

就再試一次追加前去除容器：

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

希望它能幫助！