添加父窗口'；使用javascript将CSS转换为子窗口_Javascript

添加父窗口'；使用javascript将CSS转换为子窗口

javascript

添加父窗口'；使用javascript将CSS转换为子窗口,javascript,Javascript,我正在尝试生成一个弹出窗口，其中包含主窗口一小部分的可打印版本。我使用Meteor，所以HTML和CSS文件都是通过编程生成的我想做的是使用Javascript读取父窗口中所有链接的CSS文件，并将它们附加到子窗口 var childWindow=window.open（“，”_blank“，”宽度=350，高度=150”）； var childDoc=childWindow.document； var childHead=childDoc.getElementsByTagName（“head

我正在尝试生成一个弹出窗口，其中包含主窗口一小部分的可打印版本。我使用Meteor，所以HTML和CSS文件都是通过编程生成的

我想做的是使用Javascript读取父窗口中所有链接的CSS文件，并将它们附加到子窗口

var childWindow=window.open（“，”_blank“，”宽度=350，高度=150”）；
var childDoc=childWindow.document；
var childHead=childDoc.getElementsByTagName（“head”）[0]；
$（'link'）。每个（函数（索引，元素）{
childLink=childDoc.createElement（“链接”）；
childLink.rel=“样式表”；
childLink.href=element.href；
childHead.appendChild（childLink）；
});
childDoc.write（myHtml）；

但它不起作用。似乎

childHead

指的是父文档的头，而不是子文档。我不确定这是一个安全问题，我正在运行的冲突或只是有一个错误的代码

知道我做错了什么吗？

我在我的一页上做了一件非常类似的事情。我只是用“家长”页面来写所有的东西，效果很好。这是我的工作原理。看在行动中。您会注意到，它只打印

printMe

div中的内容。而且，打印的页面与父页面具有完全相同的脚本和样式

some stuff NOT to print
<div id="printMe" class="ui-selectable-helper">
    I should be printed, but not the other stuff.
</div>
more stuff NOT to print

$(function(){
    var printWindow = window.open('', 'printWin', 'height=600, width=900, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');

    //create a new HEAD with the exact same content as the main page
    var writeMe = ('<body><head>' + $('head').html() + '</head><html>');

    //grab the content of the printMe div and use it on the print page
    writeMe += ("<div>" + $('#printMe')[0].outerHTML + "</div>");
    writeMe += ('</html></body>');    
    printWindow.document.write(writeMe);
    printWindow.document.close();    
    printWindow.focus();
    printWindow.print();  

    //you might even use this next line if you want the 'popup' window to go away as soon as they have finished printing.
    //printWindow.close();
});

一些不需要打印的东西
我应该被打印出来，但不是其他的东西。
更多不可打印的内容
$（函数（）{
var printWindow=window.open（“”，'printWin'，'height=600，width=900，toolbar=no，menubar=no，scrollbars=no，resizeable=no，location=no，directories=no，status=no'）；
//创建一个与主页内容完全相同的新标题
var writeMe=（“”+$（'head'）.html（）+“”）；
//抓取printMe div的内容并在打印页面上使用它
writeMe+=（“”+$（“”#printMe'）[0]。outerHTML+“”）；
writeMe+=（“”）；
printWindow.document.write（writeMe）；
printWindow.document.close（）；
printWindow.focus（）；
printWindow.print（）；
//如果您希望“弹出”窗口在打印完成后立即消失，您甚至可以使用下一行。
//printWindow.close（）；
});

注意：我只是使用

class=“ui可选助手”

向您显示CSS页面确实正确地传输到了新的弹出窗口。

最终对我有效的是使用

childDoc.write（myHtml）在正文中添加了一些内容
在此之前，CSS不会加载，但一旦我实际传入了几个div，CSS就会显示出来，没有任何其他修改。
实际上，它只会显示在主体中。至少在chrome中是这样的。