将孩子添加到弹出窗口中。 (JavaScript)答案

【问题标题】：Appending children into a popup-window. (JavaScript)将孩子添加到弹出窗口中。 (JavaScript)
【发布时间】：2012-11-06 22:43:10
【问题描述】：

我在尝试让一个相当简单的弹出窗口工作时遇到了一些麻烦。这个想法是父母应该打开一个弹出窗口，然后在其中附加一个 div。

代码的相关部分：

parent.html：

var childWindow;

function togglePref() {
    childWindow = window.open("popup.html", "prefPopup", "width=200,height=320");
}

function loadPopupElements() {
    var prefElements = document.getElementById("prefBrd").cloneNode(true);

    var childDoc = childWindow.document;

    var childLink = document.createElement("link");
    childLink.setAttribute("href", "pop.css");
    childLink.setAttribute("rel", "stylesheet");
    childLink.setAttribute("type", "text/css");

    childDoc.head.appendChild(childLink);
    childDoc.body.appendChild(prefElements);
}

popup.html：

<head>
</head>

<body onload="opener.loadPopupElements();">
</body>

这适用于 Safari 和 Chrome，但由于某种原因 IE 拒绝附加任何内容。

【问题讨论】：

我可以在这里看到的一件事是您不能从不同的文档中附加一个孩子。尝试附加一个您没有克隆的元素，并确保您使用 childDoc 创建的任何其他元素。

标签： javascript html popup window.open appendchild

【解决方案1】：

好的，我设法通过使用 innerHTML 的丑陋解决方案解决了这个问题。显然，正如 Hemlock 所提到的，IE 不支持从另一个文档附加子级。有人建议看一下 importNode() 方法，但我似乎也没有运气。

因此，解决方法如下：

parent.html：

var childWindow;

function togglePref() {
    childWindow = window.open("popup.html", "prefPopup", "width=200,height=320");
}

function loadPopupElements() {
    var prefElements = document.getElementById("prefBrd");
    var childDoc = childWindow.document;
    childDoc.body.innerHTML = prefElements.innerHTML;
}

popup.html：

<head>
    <link href="pop.css" rel="stylesheet" type="text/css">
</head>

<body onload="loadElements();">
</body>

<script type="text/javascript">
    function loadElements() {
        opener.loadPopupElements();
    }
</script>

这似乎是一个非常讨厌的方法，因为在我的例子中，#prefBrd 包含一些具有动态设置值的输入元素，所以为了让 popup.html 抓取它们，它必须这样做在 loadElements() 函数的末尾进行了一些迭代，而使用 appendChild 则不需要。

【讨论】：