如何判断用iframe下载xls完毕

22 Jan 2017

有一个比较变态的需求：利用iframe的src下载文档，在下载的中途，展示一个loading...,在下载完成之后删掉loading...。这里面的关键就是如何回去loading完成后的点。

经过查找和测试，总结下来还没有找到完全跨浏览器的方法，主要是在FF上有问题，但是可以解决IE11及老版本IE以及chrome下的问题。

详细如下：

1.IE11+chrome

可以用document.onreadystatechange和document.readyState解决。记住是document的不是iframe的onreadystatechange和readyState。

                html:
                <h1 id="loading">loading...</h1>
                <iframe id="test" src="SoftwareLists.xls" style="display:none"></iframe>
                js:
                document.onreadystatechange = function () {
                    if(document.readyState === 'complete') {
                       var loading = document.getElementById('loading');
                       document.body.removeChild(loading);
                    };
                }
            

2.<=IE10

                html:
                <h1 id="loading">loading...</h1>
                <iframe id="test" src="SoftwareLists.xls" style="display:none"></iframe>
                js:
                document.getElementById('test').onreadystatechange = function () {
                    if ( document.getElementById('test').readyState === 'complete' ) {
                       var loading = document.getElementById('loading');
                       document.body.removeChild(loading);
                    };
                };
            

3.document.readyState

这是官方的文档：readyState

FF不是不支持，问题是弹出complete的时机是在select download file对话框之前，所以没法做loading的删除。

3.document.readyState相关的三个状态

loading：The document is still loading.

interactive：The document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.

complete：The document and all sub-resources have finished loading. The state indicates that the load event is about to fire.