添加样式表链接打印触发jQuery click（）事件

Question

我有一个css链接头部分有media='screen'属性，然后我想链接其他具有动态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元素..然后点击ok按钮。 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（）函数。

Answer 2

它看起来像你的JavaScript函数正在运行，而不是让浏览器来更新CSS。

观看this video，它解释了Javasript中的事件循环是如何工作的。这也意味着，如果你的周期工作缓慢并阻止浏览器，你可以将它们分成超时。

我的建议会像Alex告诉的那样，让.print超时。

Answer 3

您可以使用$.get并以这种方式success callback：

$("div#alert").click(function(){ 
    $.get('css/alert.css', function (response) { 
     $('head') 
      .append("<style rel='stylesheet' media='print'></style>") 
      .html(response); 

    }).success(function() { 
     window.print(); 
    }); 
});