Question

我提交表格时提供印刷品但是当我取消打印时，表格仍然会被提交。

这里有一些示例代码：

<script>  
function printpage()  
{
   window.print();
}
</script>

<form action="" method="post">  
  <input type="text" name="fname">  
  <input type="submit" onclick="printpage()">
</form>

Answer 1

windows.print（）不会返回状态。您无法知道页面是否已打印，因此无法在不打印页面时取消提交。

Answer 2

如前所述，window.print()不会返回状态，而是异步。你可以做一些棘手的事情，比如一旦你触发对window.print的调用，检查鼠标移动（浏览器只会在打印对话框关闭或完成时识别鼠标，但你无法知道它为何被关闭）。

为了清楚起见：我在下面列出的内容没有解决问题：没有办法判断是否在JS中以编程方式取消了打印。这些只是可以为您提供其他可能性的其他选项。

IE还支持onbeforeprint和onafterprint个事件......但没有其他人这样做。

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几乎没有可靠的方法来执行此操作，它可以为您提供已取消打印与完成与失败等的详细信息等。

Answer 3

我遇到了类似的问题，即在打印页面或单击打印的取消后不希望提交表单。我的解决方案是将JavaScript内联到打印按钮中，并添加一个return false;（请参见下面的代码）。

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

这阻止了我的表单在打印或取消后提交。我还将打印按钮放在表单中：

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

我只测试了这是Google Chrome浏览器，所以不确定是否可以在其他浏览器中使用。

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

3 个答案: