2

我正在尝试生成一个弹出窗口，其中包含主窗口一小部分的可打印版本。我正在使用 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是指父文档的头部，而不是子文档。我不确定这是否是我正在运行的安全问题，或者只是代码中有错误。

任何想法我做错了什么？

4

2 回答 2

1

我在我的一个页面上做了一件非常相似的事情。我只是使用“父”页面来编写所有内容，并且工作正常。这是它对我的工作方式。看到这个小提琴在行动。您会注意到它只打印来自printMediv 的内容。此外，打印页面具有与父页面完全相同的脚本和样式。

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 页面正在正确地传输到新的弹出窗口。

于 2013-02-18T17:27:32.593 回答
0

最终对我有用的是在身体上附加一些东西childDoc.write(myHtml);

在此之前，CSS 不会加载，但是一旦我实际传入了几个 div，CSS 就显示出来了，没有任何其他修改。

于 2013-02-18T20:05:38.080 回答