iframe加载onload之坑

需求：点击按钮，下载一个文件，由于种种原因，需要借助iframe实现。

实现：点击按钮往页面上append一个iframe，将iframe的src设置为文件的url路径，实现下载。如果url不对或文件下载失败，提示下载失败。

畅想：iframe.onload=function(){ //下载成功；}      iframe.onerror = function(){ //下载失败 }

问题：想的挺好，可惜浏览器有意见。经测试，火狐及chorme都不支持onerror事件，而且，不管iframe加载是否成功，都会触发onload事件。

解决：奇技淫巧，通过title来判断页面是否正常加载。

示例：

var url = $this.attr(‘data-url‘);
    $(‘body‘).append(‘<iframe class="down-frame" id="down-frame" width="1" height="1" src="‘+url+‘" ></iframe>‘);
    var downFrame = document.getElementById("down-frame");

    downFrame.onload=function(e){
        var ifDoc = downFrame.contentDocument||{};
        var ifTitle = ifDoc.title;

        if ( ifTitle.indexOf("404")>=0 || ifTitle.indexOf("错误")>=0 ) {
            toastr.error(‘下载失败，请缩小查询范围后重新尝试！‘);
        }
    };

原文地址：https://www.cnblogs.com/newh5/p/9186714.html