Question

我使用JQwidgets，我用来打印数据onclick print-button 作为代码：

$("#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 上）..

google-chrome版本34.0.1847.131 m

这在Firefox和IE上运行良好..

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

Fiddle-Demo

Answer 1

看起来你不是唯一拥有issue的人。

我知道您的代码已经设置好了，并且您想要运行所拥有的内容，但除非有人提出黑客攻击或Google决定修复明显的错误，我认为您需要重新考虑一下正在接近这个问题。

如果无格式窗口是一个选项，或者如果打印对话框是一个模态，那么您可以使用当前策略将其关闭，但Chrome中没有这些选项。即使你能够以某种方式解决这个滚动问题，你仍然会留下一个不太理想的UX问题，如果用户在打印对话框中点击“取消”，那么它们将留下一个仍然打开的空白窗口。

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

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

<小时/>

选项1：

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

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

这个选项本质上更具有蛮力和简单性（你已经评论过你知道这一点，但是我将其放弃，因为它仍然是一个选项）。

DEMO

<小时/>

选项2：的

用户点击打开新标签/窗口的链接/按钮
在同一个函数中，表中的数据被加载到JSON对象
JSON对象将加载到新选项卡/窗口中的打印模板中
模板启动打印功能

通过采取这些操作，我认为您将足够解释JS实例，新选项卡不会影响启动脚本。

Answer 2

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

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

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

简单，轻松，有趣。

var needToReload = false;

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

$('#contentjqxgrid').scroll(function () {
    if (needToReload) {
       window.location.reload();
    }
});

Answer 3

$("#jqxscrollbar").jqxScrollBar({
    width: 5,
    height:180,
    theme:'energyblue',
    vertical:true
});

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

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

当我关闭打开的窗口时，JQwidgets滚动对chrome不起作用

3 个答案: