addEventListener在IE11中不起作用

addEventListener is not working in IE11

本文关键字：不起作用 IE11 addEventListener      更新时间：2023-09-26

下面的javascript函数上传所选文件并更新网格。它在firefox中运行得很好，但在IE11中则不然。观察到它没有执行addEventListener中的"ESignature/Registration"函数。我在注册功能中保留了断点。它没有被击中，也没有刷新网格。请指导我解决这个问题

     $("#lnkAddAttachment").click(function (e) {
        if (document.getElementById("txtFile").files[0] != null) {
            oFiles = document.getElementById("txtFile").files[0];
            nFiles = oFiles.size;
            var selectedFile = document.getElementById("txtFile").files[0];
            var xhr = new XMLHttpRequest();
            var fd = new FormData();
            var url = '@Url.Content("~/")' + "ESignature/getFile";
            fd.append("file", document.getElementById('txtFile').files[0]);
            $("#loadingwrapper").fadeIn();
            xhr.open("POST", url, true);
            xhr.send(fd);
            xhr.addEventListener("load", function (event) {
                var url = '@Url.Content("~/")' + "ESignature/Registration";
                $('#gridAttachments').load(url + ' #gridAttachments');
                $("#loadingwrapper").fadeOut();
            }, false);
            $('#txtDescription').val('');
            $('#txtFile').val('');
            return false;
        } 
    });

"addEventListener"方法在Firefox中受支持，但在IE中可能不受支持。您需要使用"onreadystatechange"来处理完成请求的事件。此外，您还需要在调用"send"之前设置"onreadystatechange"处理程序；否则，对服务器的请求可能会在设置处理程序之前完成。

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest?redirectlocale=en-美国&redirectslug=DOM%2FXMLHttpRequest#属性

由于您显然已经在使用jQuery，我建议使用$.ajax而不是直接使用XMLHttpRequest，这几乎肯定会解决问题。

但是，如果出于某种原因，您想继续直接使用XMLHttpRequest，则很可能需要使用readystatechange而不是load；也许IE11不支持load，或者在它决定用于您的页面的任何兼容性设置中都不支持它。如果您的页面是以某种较旧的兼容模式加载的，那么XMLHttpRequest对象上也不会有addEventListener。

由于您没有与任何人共享XMLHttpRequest实例，因此处理这两个潜在问题的简单方法是：

xhr.onreadystatechange = function () {
    if (xhr.readystate === 4) { // Also consider checking `status`
        var url = '@Url.Content("~/")' + "ESignature/Registration";
        $('#gridAttachments').load(url + ' #gridAttachments');
        $("#loadingwrapper").fadeOut();
    }
};

正如Chris所指出的，将移到对.send的调用之上。

但再次强调：你使用的是一个为你处理这些事情的库。使用它。

我刚刚更改了url，如下所示。它奏效了。问题是，每当下面的url命中IE时，它就会从缓存中获取，并且不会命中注册功能。为了使url每次都是唯一的，在url中添加了一个名为check的新变量。它的值每次都是唯一的，并点击注册功能。

var url = '@Url.Content("~/")' + "ESignature/Registration?check=" + new Date().getTime();

完整代码：

$("#lnkAddAttachment").click(function (e) {
    if (document.getElementById("txtFile").files[0] != null) {
        oFiles = document.getElementById("txtFile").files[0];
        nFiles = oFiles.size;
        var selectedFile = document.getElementById("txtFile").files[0];
        var xhr = new XMLHttpRequest();
        var fd = new FormData();
        var url = '@Url.Content("~/")' + "ESignature/getFile";
        fd.append("file", document.getElementById('txtFile').files[0]);
        $("#loadingwrapper").fadeIn();
        xhr.open("POST", url, true);
        xhr.send(fd);
        xhr.addEventListener("load", function (event) {
            var url = '@Url.Content("~/")' + "ESignature/Registration?check=" + new Date().getTime();
            $('#gridAttachments').load(url + ' #gridAttachments');
            $("#loadingwrapper").fadeOut();
        }, false);
        $('#txtDescription').val('');
        $('#txtFile').val('');
        return false;
    } 
});

感谢T.J.Crowder和Chris的投入。

相关文章：