我在尝试让一个相当简单的弹出窗口工作时遇到了一些麻烦。这个想法是父级应该打开一个弹出窗口，然后在其中附加一个 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 拒绝附加任何内容。
最佳答案
好吧，我设法使用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 则不需要这样做。
关于javascript - 将子项附加到弹出窗口中。 (JavaScript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13260599/