打印功能無法點擊其他標籤後

我正在使用打印的默認打印功能，但一旦打印功能完成，我無法點擊其他標籤。打印窗口正在打開在同一頁打印功能無法點擊其他標籤後

function printReport() { 
    var divElements = $('.nicEdit-main').html(); 
    var oldPage = document.body.innerHTML; 
    document.body.innerHTML = "<html><head><title></title></head><body>" + divElements + "</body>"; 
    window.print(); 
    document.body.innerHTML = oldPage; 
}

來源

2013-05-10 Prashobh

你能更詳細地瞭解'window.print（）;'後面會發生什麼嗎？您無法點擊「其他標籤」 - 是因爲網頁上的以前的內容沒有顯示，或者因爲它顯示，但不是不響應點擊？ – ASGM 2013-05-10 08:23:12

如果我關閉打印窗口或點擊打印選項，然後打印窗口將關閉並顯示我的頁面，但之後在我的頁面我無法點擊任何標籤或按鈕等 – Prashobh 2013-05-10 08:28:04

不幸的是，你剛剛更換頁面的整個身體。 innerHTML只返回HTML 的字符串形式，減去附加到元素的處理程序和任何數據。設置innerHTML將重新創建來自該字符串的DOM，而不需要最初附加的處理程序。你只是「有效」地癱瘓了頁面！

我建議：

難的方法是繼續自己在做什麼，但所有委託處理程序document像live怎麼會做這樣他們就不會被刪除。硬，可能，但不可擴展，可維護或最佳。
或者您可以創建一個隱藏的iframe並將您的內容打印在那裏。然後改爲從該iframe window中調用print。這樣，你不會失去你目前的頁面。
其他會創建一個新窗口，將內容放在那裏，運行打印並立即關閉它。與iframe的工作方式相同，但您不希望像彈出廣告那樣立即打開並關閉的令人毛骨悚然的窗口。

來源

2013-05-10 08:30:34 Joseph

嗨，謝謝你，我試着用其他函數，它現在正在工作，函數printReport（）var divElements = $（'。c3 .nicEdit-main'）。html（）; \t var divToPrint = document.getElementById（'divToPrint'）; var popupWin = window.open（''，'_blank'，'width = 800，height = 500'）; popupWin.document.open（）; popupWin.document.write（''+ divElements +''）; popupWin.document.close（）; } – Prashobh 2013-05-11 08:42:49

你正在失去的事件管理。您應該隱藏並顯示您想要打印的內容。之後，您可以重新顯示原稿並隱藏打印。

您可以使用媒體查詢來更改打印頁面時的樣式。

@media print { 
/* All your print styles go here */ 
    .nicEdit-main { 
     display: block !important; 
     width:100%; 
    } 
}

來源

2013-05-10 08:30:19 Scipion

嗨，謝謝，我換成了彈出 – Prashobh 2013-05-11 08:53:49

你不應該更換整個頁面的HTML，因爲這會刪除所有點擊處理程序（用於處理例如標籤的那些）

要打印，你應該做到以下幾點：

創建一個高於一切顯示一個div（固定的，高度/寬度：100％，頂端/左：0）
隱藏在主體
一切添加所述內容將被打印到第Ë格
呼叫打印
刪除DIV
恢復身體狀態

喜歡的東西：

function printReport() { 
    var $printerDiv = $('<div class="printContainer"></div>'); // create the div that will contain the stuff to be printed 
    $printerDiv.html(divElements); // add the content to be printed 
    $('body').append($printerDiv).addClass("printingContent"); // add the div to body, and make the body aware of printing (we apply a set of css styles to the body to hide its contents) 

    window.print(); // call print 
    $printerDiv.remove(); // remove the div 
    $('body').removeClass("printingContent"); 
}

CSS

body.printingContent > *{ 
    display: none !important; /* hide everything in body when in print mode*/ 
} 

.printContainer { 
    display: block !important; /* Override the rule above to only show the printables*/ 
    position: fixed; 
    z-index: 99999; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

來源

2013-05-10 08:34:26 Matyas

打印功能無法點擊其他標籤後

回答

相關問題