添加樣式錶鏈接打印觸發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(); 
    }); 
});