javascript - 使用 jquery 和常规 javascript 使用不允许媒体查询样式表的 CMS 打开 Div 的打印窗口

Question

几周来我一直在为这个问题苦苦挣扎，并通过过去的问题在这里找到了许多有用的线索，但一直无法拼凑出一个可行的解决方案。

在我的网站上，我有一个大约 350x320 的滚动侧边栏，我希望它具有自己的打印功能。它包含在一个 Div 中。我在边栏中有一个打印按钮，它会弹出一个打印窗口。

这个问题的独特之处在于，我们使用的 CMS 不允许“媒体查询”特定样式表，因此没有打印样式表!

我遇到的麻烦是语法，我认为 jquery 的“$css()”函数已插入页面上的此 jquery 回调函数中。

<script type="text/javascript">
        $(document).ready(function() {

        $("a.printText").click(function(){
            w=window.open('','_blank','width=1024,height=768,scrollbars=1,location=0,menubar=0')
            w.document.write('<link rel="stylesheet" type="text/css" href="css/print.css">');
            w.document.write("<h2>{$node.name}</h2>");
            w.document.write("<h3>{$node.data_map.dek.content.output.output_text}</h3>" + "<p>By {attribute_view_gui attribute=$node.data_map.instructors}</p>");
            w.document.write($('#descIntro').html());       
            /*w.print();
            w.close();*/
        });
        });
</script>    

行“w.document.write('');”不起作用，这是我认为可能有效的解决方法。

我需要将下面的样式“注入(inject)”到上面的回调中。

body {
    color: #000;
    font: 400 12px/19px Palatino, Georgia, serif;
    line-height: 1.5em;
    margin: 15px 20px;
}

h2 {
    color: #3d3d3d;
}
h3 {
    color: #3d3d3d;
    margin-bottom: 1px;
    padding-bottom: 0;
}

p {
    font-size: 1.1em;
    margin: 0 0 4px 0;
    padding: 0;
}

ul, ol {
    margin: 3px 0 3px 20px;
}
.sidebarText {
    background-color: #dfdfdf;
    border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
    margin: 7px auto;
    padding: 1px 12px 8px;
    width: 500px;
}

.sidebarText + h3 {
    padding-top: 0;
    margin-top: 0;
}

我确信这真的很简单，但由于它是如此具体，我确信有人能在 5 秒内给出答案。

感谢您的帮助!

Answer 1

一种技术是您有一个指向它自己的样式表(也就是您的打印样式表)的虚拟打印文档。将虚拟文档加载到隐藏的 iframe 中，使用 jQuery 将内容复制到虚拟文档的正文中，然后从 iframe 打印。