Javascript 打印后功能无法单击其他选项卡_Javascript_Jquery_Css_Html

Javascript 打印后功能无法单击其他选项卡

javascript jquery css html

Javascript 打印后功能无法单击其他选项卡,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我正在使用默认打印功能进行打印，但一旦打印功能完成，我就无法单击其他选项卡。打印窗口正在同一页中打开 function printReport() { var divElements = $('.nicEdit-main').html(); var oldPage = document.body.innerHTML; document.body.innerHTML = "<html><head><title></title>

我正在使用默认打印功能进行打印，但一旦打印功能完成，我就无法单击其他选项卡。打印窗口正在同一页中打开

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;
}

函数printReport（）{
var divElements=$（'.nicEdit main'）.html（）；
var oldPage=document.body.innerHTML；
document.body.innerHTML=“+divElements+”；
window.print（）；
document.body.innerHTML=旧页；
}

您正在失去事件管理。您应该隐藏并显示要打印的内容。稍后，您可以重新显示原稿并隐藏打印的内容

打印页面时，可以使用媒体查询更改页面样式

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

不幸的是，您刚刚替换了页面的整个主体

innerHTML

仅返回HTML的字符串形式，减去处理程序和附加到元素的任何数据。设置

innerHTML

将从该字符串重新创建DOM，而不使用最初附加的处理程序。你只是“有效地”瘫痪了页面

我建议：

困难的方法是继续您正在做的事情，但将所有处理程序委托给
```
document
```
，就像
```
live
```
所做的那样，这样它们就不会被删除。硬、可能，但不可扩展、可维护或优化
或者，您可以创建一个隐藏的
```
iframe
```
，然后将要打印的内容放在那里。然后从iframe
```
窗口调用print
。这样，您就不会丢失当前页面
```


其他人会创建一个新窗口，将内容放在那里，运行print，然后立即关闭它。工作原理与iframes相同，但您不希望看到一个像弹出式广告一样立即打开和关闭的令人毛骨悚然的窗口

您不应该替换整个页面的html，因为这样会删除所有单击处理程序（例如处理选项卡的处理程序）
要打印，您应执行以下操作：
创建显示在所有内容上方的div（固定，高度/宽度：100%，顶部/左侧：0）
把一切藏在身体里
将要打印的内容添加到div
呼叫打印
删除div
恢复身体状态
比如：
JS
您能否更具体地说明window.print（）之后会发生什么？您无法单击“其他选项卡”-是因为页面上的上一个内容没有显示，还是因为它显示但没有响应单击？如果我关闭打印窗口或单击打印选项，则打印窗口将关闭并显示我的页面，但在我的页面中，我无法单击任何选项卡，或者按钮：谢谢你，我尝试了它现在正在运行的其他函数，函数printReport（）{var divElements=$（'.c3.nicEdit main'）.html（）；var divToPrint=document.getElementById（'divToPrint'）；var popupin=window.open（'''.'u blank'，width=800，height=500'）；popupin.document.open（）；popupin.document.write（“”+divElements+“”）；popupWin.document.close（）；}
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");
}

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%;
}