Appending children into a popup-window. (JavaScript)

问题

I'm having some trouble trying to get a fairly simple popupper to work. The idea is that the parent should open a popup window and then append a div in it.

The relevant parts of the code:

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>

This works fine with Safari and Chrome, but for some reason IE refuses to append anything.

回答1:

Ok, I managed to work around the problem with a uglyish solution using innerHTML. Apparently, as Hemlock mentioned, IE doesn't support appending children from a another document. Some suggested to take a look at the importNode() method but I seemed to have no luck with it either.

So, the workaround goes as follows:

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>

This seems quite a nasty way to go because in my case the #prefBrd contains some input elements with dynamically set values, so in order for the popup.html to grab them, it has to do a bit of iteration at the end of the loadElements() function, which wouldn't have been necessary using appendChild.

来源：https://stackoverflow.com/questions/13260599/appending-children-into-a-popup-window-javascript

标签

javascript

html

popup

window.open

appendchild