Fatal编程技术网
  • javascript/
  • 将子项追加到弹出窗口中。（JavaScript）

将子项追加到弹出窗口中。（JavaScript）

javascript html

将子项追加到弹出窗口中。（JavaScript）,javascript,html,popup,window.open,appendchild,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 p

我在试着让一个相当简单的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);
}

<head>
</head>

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

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;
}

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

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

<script type="text/javascript">
    function loadElements() {
        opener.loadPopupElements();
    }
</script>
popup.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);
}

<head>
</head>

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

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;
}

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

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

<script type="text/javascript">
    function loadElements() {
        opener.loadPopupElements();
    }
</script>
这在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").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);
}

<head>
</head>

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

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;
}

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

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

<script type="text/javascript">
    function loadElements() {
        opener.loadPopupElements();
    }
</script>
popup.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);
}

<head>
</head>

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

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;
}

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

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

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


函数loadElements（）{
loadPopupElements（）；
}
这似乎是一种非常糟糕的方式，因为在我的例子中#prefBrd包含一些具有动态设置值的输入元素，因此为了让popup.html获取它们，它必须在loadElements（）函数的末尾进行一些迭代，使用appendChild是不必要的。

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