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

时间:2012-11-06 22:43:11

标签: javascript html popup window.open appendchild

我在尝试让一个相当简单的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拒绝附加任何内容。

1 个答案:

答案 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是不必要的。