简体   繁体   English

dispatchEvent 在带有 Internet Explorer 11 的 javascript 中不起作用

[英]dispatchEvent doesn't work in javascript with Internet explorer 11

In my website I have a javascript in which I wish to open a file save dialog.在我的网站上,我有一个 javascript,我希望在其中打开一个文件保存对话框。 The purpose is to save in a text file some data that are coming from the web server.目的是将一些来自 web 服务器的数据保存在文本文件中。

I am trying to use the code snippet shown in this post:我正在尝试使用这篇文章中显示的代码片段:

[ Using HTML5/JavaScript to generate and save a file [ 使用 HTML5/JavaScript 生成和保存文件

And to be precise:准确地说:

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

This works great for Firefox and Chrome.这适用于 Firefox 和 Chrome。 However with Internet Explorer 11 it doesn't work.但是,对于 Internet Explorer 11,它不起作用。 When this instruction is executed...当这条指令被执行...

pom.dispatchEvent(event);

...nothing happens. ...什么都没发生。 The save dialog is not opened, and no error is shown in the java console of the browser.保存对话框没有打开,浏览器java控制台也没有报错。 The event seems to get lost in the void.事件似乎迷失在虚空中。 Any help would be greatly appreciated.任何帮助将不胜感激。

This is widely supported in modern browser.这在现代浏览器中得到广泛支持。 However,然而,

Older versions of IE supported an equivalent, proprietary EventTarget.fireEvent() method.旧版本的 IE 支持等效的专有 EventTarget.fireEvent() 方法。

Source: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent来源: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Your code works fine for me in Internet Explorer 11.836.18362.0, however with that said, MDN advises not to use the technique you are using.您的代码在 Internet Explorer 11.836.18362.0 中对我来说可以正常工作,但是话虽如此,MDN 建议不要使用您正在使用的技术。 createEvent and initEvent are depricated, can have unpredictable results and may be dropped at any time. createEventinitEvent已被贬低,可能会产生不可预知的结果,并且可能随时被删除。 Use Event() instead.请改用Event() See initEvent and createEvent MDN doc pages.请参阅initEventcreateEvent MDN 文档页面。

I tried to test the issue on my side and I can see that file is not getting download in the IE 11 browser.我试图测试我这边的问题,我可以看到该文件没有在 IE 11 浏览器中下载。

Below is the modified code that you can use for the IE and other browsers.以下是可用于 IE 和其他浏览器的修改后的代码。 It will download the file properly.它将正确下载文件。

<!doctype html>
<html>
<head>
<script>
function download(data, filename, type) 
{
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) 
    {
        window.navigator.msSaveOrOpenBlob(file, filename);
    }
    else 
    {   var pom = document.createElement('a');
        pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data));
        pom.setAttribute('download', filename);

        if (document.createEvent) 
        {
            var event = document.createEvent('MouseEvents');
            event.initEvent('click', true, true);
            pom.dispatchEvent(event);
        }
        else 
        {
            pom.click();
        }
    }
}
download('Hello world!','test.txt','text/plain');
</script>
</head>
<body>
<h2>Refresh the page</h2>
</body>
</html>

Output in the IE 11 browser: IE 11 浏览器中的 Output:

在此处输入图像描述

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM