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元素..然后点击了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

您可以这样使用$.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();
    });
});

Answer 3

看起来您的javascript函数正在运行，并且不允许浏览器更新CSS。

观看this video，解释事件循环在Javasript中的工作原理。这也意味着如果您的周期缓慢运行并阻止浏览器，您可以在超时时将它们分开。

我的建议是做一些像Alex所说的那样，让.print暂停。

在jQuery click（）事件上附加用于打印的样式表链接

3 个答案: