我正在尝试生成一个弹出窗口,其中包含主窗口一小部分的可打印版本。我正在使用Meteor,因此HTML和CSS文件都是以编程方式生成的。
我想要做的是使用Javascript读取父窗口中的所有链接的CSS文件,并将它们附加到子窗口。
var childWindow = window.open("", "_blank", "width=350,height=150");
var childDoc = childWindow.document;
var childHead = childDoc.getElementsByTagName("head")[0];
$('link').each(function(index,element){
childLink = childDoc.createElement("link");
childLink.rel = "stylesheet";
childLink.href = element.href;
childHead.appendChild(childLink);
});
childDoc.write(myHtml);
但它不起作用。似乎childHead
指的是父文件的头部,而不是孩子的头部。我不确定这是否是一个安全问题,我正在与代码发生冲突,或者只是在代码中出错。
任何想法我做错了什么?
答案 0 :(得分:1)
我在其中一个页面上做了类似的事情。我只是使用“父”页面来编写所有内容,它运行正常。这是它对我有用的方式。请参阅this fiddle的实际操作。
您会注意到它只打印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();
});
注意:我只是使用class="ui-selectable-helper"
向您展示CSS页面确实正确地传输到新的弹出窗口。
答案 1 :(得分:0)
最终为我工作的是用childDoc.write(myHtml);
在此之前,CSS不会加载,但是一旦我实际传入几个div,CSS就会显示出来而没有任何其他修改。