Javascript 在jQuery click（）事件中触发用于打印的追加样式表链接

我在头部有一个css链接，它具有

media='screen'

属性，然后我想动态链接另一个具有

media='print'

属性的css文件

我这样做是为了解决问题

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

$（“div#alert”）。单击（函数（）{
$（“头”）
.附加（“”）；
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);
});

$（“div#alert”）。单击（函数（）{
$（“头”）
.附加（“”）；
setTimeout（函数（）{
window.print（）；
}, 1000);
});

---

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

可能您调用window.print（）太早了（甚至在下载打印样式表之前）-尝试以下方法：

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

$（“div#alert”）。单击（函数（）{
$（“头”）
.附加（“”）；
setTimeout（函数（）{
window.print（）；
}, 1000);
});

---

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

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

了解Javasript中事件循环的工作原理。这也意味着，如果您的周期工作缓慢，并且阻塞了浏览器，您可以在超时中拆分它们

---

我的建议是像Alex所说的那样，在超时时间内放入

.print

。

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

了解Javasript中事件循环的工作原理。这也意味着，如果您的周期工作缓慢，并且阻塞了浏览器，您可以在超时中拆分它们

---

我的建议是像Alex所说的那样，在超时时间内放入

.print

。

您可以使用

$.get

和

成功回调

：

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

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

$（“div#alert”）。单击（函数（）{
$.get（'css/alert.css'，函数（响应）{
$（“头”）
.附加（“”）
.html（回应）；
}).success（函数（）{
window.print（）；
});
});

您可以使用

$。通过以下方式获取
和
成功回调
：

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

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

$（“div#alert”）。单击（函数（）{
$.get（'css/alert.css'，函数（响应）{
$（“头”）
.附加（“”）
.html（回应）；
}).success（函数（）{
window.print（）；
});
});
执行ajax请求太多了。。我原以为
延迟。then（）
可以工作，但是
设置超时
很好，谢谢：DDoS ajax请求太多了。。我原以为
延迟。then（）
可以工作，但是
设置超时
很好，谢谢：D