Javascript:打开新窗口并从当前窗口复制css引用

Question

我想打开一个新窗口，并从当前窗口复制css引用，以便我的新窗口具有相同的样式。我尝试了以下方法：

var externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');
var headElements = window.document.head.childNodes;
for(var i = 0; i < headElements.length; i++)
{
externalWindow.document.head.appendChild(headElements[i]);
}

但是，当我在新窗口中使用devTools检查head元素时，head元素是空的。使用调试器，我可以看到headElements正确地从当前页面获取了head元素，并且appendChild正在所有这些元素上运行。

如果我运行：

externalWindow.document.body.appendChild(window.document.getElementById("MyElement"));

它将一个元素复制到身体上，那么为什么我不能复制头部的元素呢？

Answer 1

简单到：

document.head.querySelectorAll('link, style').forEach(htmlElement => {
newWindow.document.head.appendChild(htmlElement.cloneNode(true));
});

Answer 2

在打开新文档之前，您可以在现有文档中创建一个STYLE标记，并使用标题中LINK或STYLE标记的所有样式填充该标记。然后，您可以将该标记复制到新文档的末尾。

类似以下内容：

function showStyles() {
let ss = document.styleSheets;
let copycss = document.createElement("style");
// div just to show that styles are being found
let copydiv = document.getElementById("copiedstyles");
for (let i = 0; i < ss.length; i++) {
for (let j = 0; j < ss[i].cssRules.length; j++) {
let css = ss[i].cssRules[j].cssText;
copycss.innerHTML += css + "n";
// Just for testing
copydiv.innerHTML += css + "<br>";
}
}
copycss.innerHTML += "button {color:purple;}n";
copydiv.innerHTML += "button {color:purple;}<br>";
document.body.appendChild(copycss);
}

.blah {color:red;}
button {color:green;}

<button onclick="showStyles();">Show styles</button>
<div id="copiedstyles"></div>