Question

我有一个名为“myForm”的表单，我安装了处理程序，以便在表单移出时捕获表单数据。我发现当用户离开表单时不会发布表单数据。 onchange有效但在离开表单时不会捕获数据。

<script type="text/javascript">
function saveForm()
{
    alert("saveForm");
    document.myForm.submit();
}
window.onbeforeunload = saveForm;
//window.onchange = saveForm;

第二个例子：

这是另一个例子。在编辑字段中输入和不输入数据时按Yahoo链接会导致2个不同的反应

<script type="text/javascript">
function unloadTest() { alert("unloadTest"); }
function changeTest() { alert("changeTest"); } 

window.onbeforeunload = unloadTest

window.onchange = changeTest 

</script>

<form name="myForm">

<A href="yahoo.com">Yahoo</a>
<br> 
<input type="text" name="foo">
</form>

Answer 1

问题是请求是异步的，当选项卡关闭时，它会中止。

这是不好的做法，但您可以使用同步请求来执行此操作。

例如：

window.onbeforeunload= function() {
    var myForm = $('#myForm');
    var request = myForm.serialize();
    var xhr = new XMLHttpRequest();
    xhr.open('POST','www.example.com/submit',false); // false for synchronized request
    xhr.send(request);
}

当用户关闭标签页时，页面将停止，直到服务器的响应返回。

当您使用Synchronous XMLHttpRequest时，您会收到控制台（Chrome和FF）警告 - “主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。有关更多帮助，请查看http://xhr.spec.whatwg.org/。 “

最佳做法是使用onbeforeunload的主要方法。例如：

var hasChanges = false;
var myForm = $('#myForm');
myForm.on('change',function() {
    hasChanges = true;
});

window.onbeforeunload= function() {
    if (notSubmit) {
        return ('You have unsaved changes,'); // or whatever
    }
}

对不起我的英文......

Answer 2

像这样编写代码与在mouseover上使用window.location相同，当它们悬停在链接或按钮上时基本上会重定向它们。浏览器阻止了那种事情。 我建议您使用localStorage API存储和检索表单数据。你写的是糟糕的javascript。

我相信大多数浏览器都不会允许它在卸载之前提交，因为在您尝试离开页面或关闭浏览器窗口时会触发before load事件。即使允许提交该事件也不是很好。 localStorage允许您在用户返回时使用数据填充表单更符合道德规范。

使用异步请求可以解决您遇到的一些问题，但仍然不是一件好事。

JavaScript onbeforeunload（）函数不提交表单

2 个答案: