Question

我有一个菜单项，当点击它时，捕获网站的屏幕截图并将其发送到支持bean。它使用html2canvas库。问题是我得到随机中止的XHR，我无法弄清楚原因。

以下是菜单项的代码：

<p:submenu label="Print" id="print">
        <p:menuitem value="Print Map in PDF" onclick="printMapPDF();"/>     
</p:submenu>

以下是该函数的代码：

function printMapPDF() {

    console.log("test 1");

    html2canvas($('#mainForm\\:map'), {
        allowTaint : true,
        useCORS : true,
        onrendered : function(canvas) {
            console.log("test 2");
            var dataURL = canvas.toDataURL("image/png");
            var hidden = document.getElementById('mainForm:dataURLfield');
            hidden.setAttribute('value', dataURL);
            hidden.onchange();  
        }
    });

    console.log("test 3");

    return true;
}

控制台上出现

'test 1'和'test 3'。然后，当渲染图像时，它调用回调函数，中止XHR，最后出现'test 2'。我想在调用html2canvas时必须发生错误，但我不知道该如何处理。

任何线索？

Answer 1

它已中止，因为<p:menuitem>导航到其（默认）目标网址。只需让onclick return false;阻止元素执行其默认点击行为（通常是刷新当前页面）。

<p:menuitem ... onclick="printMapPDF(); return false;" />

当导航发生在ajax请求发送之前，那么你显然会得到一个中止XHR的问题。

那就是说，从JSF退一步并首先学习一些基本的HTML和JavaScript是值得的。您的具体问题与JSF无关。 JSF在这个问题的上下文中只是一个HTML代码生成器。在普通.html文件中使用JSF生成的HTML输出副本时，您会遇到完全相同的问题，html javascript用户可以轻松回答问题。

不明原因的中止XHR

1 个答案: