我在尝试让一个相当简单的popupper工作时遇到了一些麻烦。这个想法是父母应该打开一个弹出窗口,然后在其中附加一个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拒绝附加任何内容。
答案 0 :(得分:2)
好的,我设法使用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是不必要的。