为什么从 div 填充新窗口会删除原始文档中的 div？

Question

最近几天，我在使用 Prototype 填充窗口（可调整大小的可拖动原型-UI 窗口） 内容时遇到了一个大问题。 我终于找到了一个我想要做的工作示例，但它使用某种“Windows插件”作为原型，我不使用它，所以基本上我只是想问如何编译他们的代码以适应正常的原型。

我想做的是有一个窗口，其中的内容是从正文中的 DIV 中提取的，问题是在我打开窗口一次后 - div 被删除，我无法重新打开窗口。

这是他们的工作代码：

if (contentWin != null) {
  Dialog.alert("Close the window 'Test' before opening it again!",{width:200, height:130}); 
}
else {
  contentWin = new Window({maximizable: false, resizable: false, hideEffect:Element.hide, showEffect:Element.show, minWidth: 10, destroyOnClose: true})
  contentWin.setContent('test_content', true, true)
  contentWin.show();    

  // Set up a windows observer, check ou debug window to get messages
  myObserver = {
    onDestroy: function(eventName, win) {
      if (win == contentWin) {
        $('container').appendChild($('test_content'));
        contentWin = null;
        Windows.removeObserver(this);
      }
      debug(eventName + " on " + win.getId())
    }
  }
  Windows.addObserver(myObserver);
}

这是我的代码（每次刷新我不能多次打开它）：

         function openCappAR() {
      var cApp = new UI.Window({theme: "ultra_dark",
      width:  360, 
           height: 350,
           superflousEffects: superflousEffects}).center().show();
           cApp.setContent(
           $('ceBlock').setStyle({
            display: 'inherit'
})
)
    cApp.header.update("Create an App");   
     }

基本上我需要 DIV 在窗口关闭时返回到他的第一个版本。 我认为 Javascript 也有观察者，所以如果我错了，我会添加一个 JS 标签来修复我:)

编辑：基本上我需要的是一个窗口，我可以在关闭它后重新打开它，主要现在的问题是，当我打开一个新窗口时，它会从原始文档中删除 div，而当我关闭窗口时，根本没有 DIV。

Answer 1

查找 Prototype UI 后，我意识到您并不是在谈论打开一个真实窗口，而是在页面上打开一个可移动的类似窗口的元素。这是相当重要的一点。

不管怎样，如果我理解你的问题（我不确定我理解了），我想你可以克隆 div 元素，并在窗口中使用克隆。这将使原始 div 保持不变并仍然存在。

var windowContent = $('ceBlock').clone(true);
windowContent.setStyle({ display: 'inherit' });
cApp.setContent(windowContent);

还没有测试过，但应该可以。请注意，clone 不会克隆或复制元素上的任何事件侦听器，因此您必须再次添加这些侦听器（如果有）。

---

编辑： Prototype 的 clone 方法 主要只是一个别名浏览器内置的 cloneNode 方法。因此，如果你不能使用 Prototype 的方法，你应该可以这样做：

// use the standard DOM method
var windowContent = $('ceBlock').cloneNode(true);

// use the dollar function to ensure that the cloned element has been extended by Prototype
$(windowContent).setStyle({ display: 'inherit' });

cApp.setContent(windowContent);