3

我使用JQwidgets，我使用 onclick 打印按钮打印数据作为代码：

$("#print").click(function () {
     var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
     var newWindow = window.open('', '', 'width=800, height=500'),
     document = newWindow.document.open(),
     pageContent =
         '<!DOCTYPE html>\n' +
         '<html>\n' +
         '<head>\n' +
         '<meta charset="utf-8" />\n' +
         '<title>jQWidgets Grid</title>\n' +
         '</head>\n' +
         '<body>\n' + gridContent + '\n</body>\n</html>';
         document.write(pageContent);
         document.close();
         newWindow.print();
});

当我关闭打印寡妇（不继续打印）时，我无法使用网格滚动（在chrome上）..

谷歌浏览器版本 34.0.1847.131 m

这在 Firefox 和 IE 上运行良好。

关闭chrome上的打印窗口后如何修复滚动

小提琴演示

4

3 回答 3

1

看来您不是唯一一个遇到此问题的人。

我知道您的代码已经设置好，并且您希望使用现有的代码运行，但除非有人提出黑客攻击或 Google 决定修复明显是错误的问题，否则我认为您需要重新考虑如何处理此问题问题。

如果 chromeless windows 是一个选项，或者如果打印对话框是一个模式，那么您可以使用当前策略来实现这一点，但这些选项在 Chrome 中都不可能。即使您能够以某种方式解决此滚动问题，您仍然会遇到一个不太理想的用户体验问题，因为如果用户在打印对话框中点击“取消”，那么他们会留下一个仍然打开的空白窗口。

这是一个 JS fiddle 来演示您需要更改您的方法：DEMO 您可以从这个演示中看到，即使我们通过在内容对象中将其作为纯文本传递来从新窗口中运行一个完全独立的脚本，它仍然会导致同样的问题。这对我来说意味着这是一种父/子类型的关系，JS 不容易规避。

我推荐两种可能的解决方案：

选项1： 
<input type="button" value="Print" onclick="window.print(); return false;"  />

这会触发无法从“Windows 关闭按钮”关闭的​​全屏打印对话框。这样你就可以一起避免这个问题。然后您可以结合使用 JS 和打印样式来定位和隔离您要打印的信息。我知道这需要更多的工作，但我认为可能是更好的跨平台解决方案。

这个选项本质上更加暴力和简单化（你已经评论说你知道这一点，但我将其保留，因为它仍然是一个选项）。

演示

选项2：
  1. 用户单击打开新选项卡/窗口的链接/按钮
  2. 在同一个函数中，表中的数据被加载到 JSON 对象中
  3. JSON 对象被加载到新选项卡/窗口中的打印模板中
  4. 模板启动打印功能

通过采取这些行动，我认为您将充分解除 JS 实例的关联，以至于新选项卡不会影响启动脚本。

于 2014-05-15T08:10:10.693 回答
0

这是一个浏览器错误 - 你必须找到某种黑客来修复它。

听起来您不想将打印对话框代码放在其他地方，因此不会影响您的滚动条。这是显而易见的解决方案，但听起来你不能这样做。

这是我要做的：等到有人触发了有问题的条件，然后在滚动事件上放置一个事件侦听器。当它发生时......继续并重新加载页面。

简单，轻松，有趣。

var needToReload = false;

$("#print").click(function () {
... as you have
    needToReload = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
}

$('#contentjqxgrid').scroll(function () {
    if (needToReload) {
       window.location.reload();
    }
});
于 2014-05-16T04:00:30.787 回答
0 
$("#jqxscrollbar").jqxScrollBar({
    width: 5,
    height:180,
    theme:'energyblue',
    vertical:true
});

$("#jqxscrollbar1").jqxScrollBar({
    width: 300,
    height:5,
    theme:'energyblue'
});

看看jsfiddle：http: //jsfiddle.net/8PtUX/6/

于 2014-08-30T12:25:51.897 回答