0

我的地图应用程序页面有一个 div，专门用于包含浮动在地图上方的小部件，例如帮助窗口或搜索结果列表。在任何给定时间都显示单个小部件或不显示任何内容。每个小部件都有一个按钮，单击它可以打开该小部件（替换 div 中的内容）或关闭它（如果它是当前打开的小部件）。

这是处理这些按钮点击的函数之一（前面提到的 div 是widgets.main）：

_openSearch: function() {
    if (widgets._activeWidget == widgets._searchWidget){
        domConstruct.empty(widgets.main);
        widgets._activeWidget = null;
    } else {
        widgets._searchWidget.show();
        widgets._activeWidget = widgets._searchWidget;
    }
},

这是被调用的函数：

show: function() {
    domConstruct.empty(this.rootDiv);
    this.rootDiv.appendChild(this.widgetDiv);
},

widget.widgetDiv是具有小部件实际内容的 div 元素。我的意图是生成一次内容，然后widgetDiv在小部件关闭时将其存储。这在 IE 和 Chrome 中按预期工作，但 IE（尤其是 IE8）在调用widgetDiv时会删除内部的所有内容domConstruct.empty()。

如何在 IE 中获得所需的行为？此外，在标准方面，哪种行为是“正确的”？

4

1 回答 1

1

Dojo domConstruct.empty()（请参阅此处的文档）只是破坏了所有子元素——它实际上innerHTML为非 SVG 元素设置了一个空字符串。

removeChild可能性能稍差，但它似乎更适合您的用例，因为它返回已删除的节点。也许像下面这样的东西会起作用：

show: function() {
    // save a reference to the current children of rootDiv to use later
    var oldChild = this.rootDiv.removeChild(this.rootDiv.firstChild);

    this.rootDiv.appendChild(this.widgetDiv);
}

确保rootDiv只有一个您想要保存的孩子。如果没有，您可以将其包装在<div>.

于 2013-09-23T16:56:33.787 回答