javascript - 将节点从主窗口移动到弹出窗口会导致 HierarchyRequestError

Question

我对 JavaScript 有疑问。我无法找出为什么 IE 在以下代码部分抛出 HierarchyRequestError。我在 div 容器内的主屏幕中创建 map (例如 GoogleMap 或 OpenStreetMap)。该节点的 ID 为“map-canvas”。通过按下一个按钮，我想将该 map 移动到一个弹出窗口中。因此，我加载了一个 HTML 文件，其中仅包含一个 ID 为“mapCol”的 div 容器和一个 ID 为“map-canvas-pop”的 div 容器。默认情况下，该容器中有一个加载图像。

当 DOM 在弹出窗口中准备就绪时，我想将 map 节点从主窗口移动到弹出窗口中。在使用 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

我之前遇到过同样的问题，后来发现，解决这个问题的唯一方法是避免实际的节点克隆，而是将带有映射的组件重新设计为可序列化。 (当使用不同的窗口时，它也是比元素克隆更好的做法。)

根据我的克隆经验，在传输事件监听器、一些元素属性、引用等方面存在问题。

IE问题是因为IE不允许在文档之间复制节点。 (在旧版本中，您也无法将在一个文档中创建的 DOM 元素添加到另一个文档中。)