使用点击功能后刷新同一页面上的div答案

【问题标题】：Refresh a div on the same page after using click function使用点击功能后刷新同一页面上的div
【发布时间】：2012-07-11 11:59:57
【问题描述】：

我正在使用 java 脚本打印功能，该功能在点击时打印页面的预定义 div。函数如下：

<head>
<script type="text/javascript">
function printDiv(any printable div) {      
var printContents = document.getElementById(any printable div).innerHTML;      
var originalContents = document.body.innerHTML;       
document.body.innerHTML = printContents;       
window.print();       
document.body.innerHTML = originalContents; 
} 
</script>
</head>

打印机表单输入法和可打印的div如下：

<body>
<input type="button" class="button" onclick="printDiv('any printable div')" name="print" value="print" />
<div id = "any printable div"> On button click contents here are printed </div>
</body>

我还在同一页面上使用 j-query 文本选取框/滚动条来执行基于函数的任务

 $(document).ready(function(){

一切都可以独立运行。问题是当点击打印按钮时，文本选框/滚动条停止滚动文本。在页面刷新之前，滚动条无法滚动文本。所以我正在使用 html 元刷新，但这对访问者来说可能是一种恼人的体验。我也不想在 iframe 中使用滚动条。

此时我已经尝试了一些基于 j-query 和 java 脚本的解决方案。脚本刷新（只是淡入淡出整个文本块）滚动条静默但实际上无法保持文本滚动的 div。

是否有任何好的基于 j-query 或 java 脚本的解决方案可以根据我在上面解释的情况在给定时间段内静默刷新滚动条 div？

【问题讨论】：

标签： javascript jquery html javascript-events

【解决方案1】：

变量名中不能有空格。 function printDiv(any printable div) 是语法错误。

试试吧：

function printDiv(elId) {      
    var printContents = document.getElementById(elId).innerHTML;      
    var originalContents = document.body.innerHTML;       
    document.body.innerHTML = printContents;       
    window.print();       
    document.body.innerHTML = originalContents; 
}

【讨论】：

是的，我知道。那样写只是为了便于理解。谢谢，

【解决方案2】：

根据您所说的，我假设这里的目的是能够仅打印某个 div，而不是整个页面。如果是这样的话，那么你真的会在这里走极端来执行这个功能。

如果您只想制作更漂亮的页面版本（没有菜单等），请查看How can I have different CSS when I print or print preview?。该问题将展示如何使用一组不同的 css 进行打印，因此您可以将 display:none; 设置为打印时不想显示的任何内容。

如果您只想打印一个 div，那么您可以查看jQuery print element plugin。这是一个简单的 js 文件，您在 html 中链接然后调用

$([selector]).printElement();

只打印那个元素。例如，您可以这样重写您的方法：

function printDiv(anyPrintableDiv) { 
    $('#' + anyPrintableDiv).printElement();
}

【讨论】：

这真的很奇怪，当我使用托管在 github 上的 jquery.printElement.min.js 插件时，打印功能可以完美运行，但是当它托管在我的服务器上时，打印功能不起作用。知道为什么会发生吗？请看我的回答。谢谢，