打印功能无法点击其他标签后

我正在使用打印的默认打印功能，但一旦打印功能完成，我无法点击其他标签。打印窗口正在打开在同一页打印功能无法点击其他标签后

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

打印功能无法点击其他标签后

回答

相关问题