无法解释的中止 XHR

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> 导航到其（默认）目标 URL。只需让 onclick return false; 来阻止元素执行其默认点击行为（通常是刷新当前页面）。

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

如果导航发生在 ajax 请求发送之前，那么您显然会遇到 XHR 中止的问题。

也就是说，从 JSF 退一步学习一些基本的 HTML and JavaScript first. Your concrete problem is not JSF related. JSF is in the context of this question merely a HTML code generator. You'd have had exactly the same problem when having a copy of JSF-generated HTML output in a plain .html file and the question would easily be answerable by html javascript 用户是值得的。

无法解释的中止 XHR

Unexplained Aborted XHR

jsf

jsf-2

html2canvas