附加样式表链接，用于打印触发jQuery的click()事件

Append stylesheet link for printing triggered on jQuery click() event

本文关键字：jQuery click 事件 打印 样式 链接 用于      更新时间：2023-09-26

我在头部部分有一个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元素。然后点击确定按钮这次…media='print'在工作…那么我该怎么处理window.print()呢?

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

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

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

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

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

观看这个视频，它解释了javascript中的事件循环是如何工作的。这也意味着如果你的循环运行缓慢并且阻塞了浏览器，你可以在超时时间内将它们分开。

我的建议是像Alex所说的那样，将.print设置为超时

相关文章：