如果window.print被取消,则阻止表单提交


prevent form submit if window.print is cancelled

我有一个表单,在提交表单时打印
但当我取消打印时,表单仍然是提交的。

这是一些示例代码:

<script>  
function printpage()  
{
   window.print();
}
</script>
<form action="" method="post">  
  <input type="text" name="fname">  
  <input type="submit" onclick="printpage()">
</form>

windows.print()不返回状态。您无法知道页面是否已打印,因此无法在页面未打印时取消提交。

我也遇到过类似的问题,打印页面后不希望提交表单,或者在打印时单击"取消"。我的解决方案是将JavaScript内联到打印按钮中,并添加一个return false;(请参阅下面的代码)。

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

这阻止了我在打印或取消后提交表单。我还把我的打印按钮放在我的表格里:

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

我只测试了谷歌Chrome,所以不确定它是否适用于其他浏览器。

如前所述,window.print()不返回状态,并且是异步的。你可以做一些棘手的事情,比如触发对window.print的调用后,检查鼠标的移动情况(浏览器只有在打印对话框关闭或完成后才能识别鼠标,但你无法知道它为什么关闭)。

需要明确的是:我在下面列出的任何内容都不能解决这个问题:没有办法判断JS中是否以编程方式取消了打印。这些只是额外的选项,可能会给你其他的可能性。

IE还支持onbeforeprintonafterprint事件。。。但没有其他人这样做。

多年来,WebKit一直有一个错误来处理此类事件,但它基本上已经死了:https://bugs.webkit.org/show_bug.cgi?id=19937

但是,如果您支持具有window.matchMedia的浏览器(https://developer.mozilla.org/en/DOM/window.matchMedia)可用(浏览器支持:http://caniuse.com/#feat=matchmedia),您可能还有更多选择。它基本上提供了一个API来确定文档是否与mediaQuery匹配。其中包括一个戏剧性的停顿,print事件。

类似于(结合IE的专有方法和matchMedia)的东西:

(function() {
    var apiMQL = null
        , triggerBeforePrint = function() {
            console.log('Firing Before Print');
        }
        , triggerAfterPrint = function() {
            console.log('Firing After Print');
        }
    ;
    if (window.matchMedia) {
        apiMQL = window.matchMedia('print');
        apiMQL.addListener(function(mql) {
            if (mql.matches) {
                triggerBeforePrint();
            } else {
                triggerAfterPrint();
            }
        });
    }
    window.onbeforeprint = triggerBeforePrint;
    window.onafterprint = triggerAfterPrint;
}());

请记住,使用几乎没有可靠的方法来做到这一点,只有JavaScript可以为您提供取消打印与完成打印与失败打印等的详细信息。