將孩子追加到彈出式窗口中。（JavaScript）

我遇到了一些麻煩，試圖讓一個相當簡單的彈出窗口工作。這個想法是，父母應該打開一個彈出窗口，然後在其中附加一個div。將孩子追加到彈出式窗口中。（JavaScript）

代碼的相關部分：

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拒絕追加任何內容。

來源

2012-11-06 aupe

我可以在這裏看到的一件事是，你不能從一個不同的文檔追加一個孩子。嘗試附加一個你沒有克隆的元素，並確保你使用childDoc創建的其他元素。 – Hemlock

好吧，我設法解決了使用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包含一些inpu t元素具有動態設置的值，所以爲了讓popup.html抓住它們，它必須在loadElements（）函數的末尾執行一些迭代操作，而這對於使用appendChild來說不是必需的。

來源

2012-11-07 13:04:50 aupe

你節省了我的一天，非常感謝你的隊友！ – CiccioMiami

將孩子追加到彈出式窗口中。 （JavaScript）

回答

相關問題

將孩子追加到彈出式窗口中。（JavaScript）