javascript - 附加样式表链接以在 jQuery click() 事件上触发打印

Question

我的 head 部分有一个具有 media='screen' 属性的 css 链接，然后我想链接另一个具有 media='print' 的 css 文件> 动态属性。

我这样做是为了解决问题。

$("div#alert").click(function(){
    $('head')
    .append("<link rel='stylesheet' href='css/alert.css' media='print' />");
    window.print();
});

但是..当我运行该代码时，输​​出只是根据 media='screen' css 打印的。

然后我用相同的代码再次尝试，我单击了 div 元素，当出现打印对话框时，我单击了取消按钮，然后再次单击了 div 元素..然后这次单击了确定按钮.. media='print' 正在工作...那么我与 window.print() 有何关系？

Answer 1

也许您太早调用 window.print() (在下载打印样式表之前) - 试试这个:

$("div#alert").click(function(){
    $('head')
    .append("<link rel='stylesheet' href='css/alert.css' media='print' />");
    setTimeout(function() {
        window.print();
    }, 1000);
});

一个更优雅的解决方案是异步加载样式表，将其插入头部，然后在 AJAX 请求的回调中调用 print() 函数。