zoukankan      html  css  js  c++  java
  • 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('下载失败,请缩小查询范围后重新尝试!');
            }
        };

  • 相关阅读:
    此生对我影响最大的三位老师
    介绍自己
    介绍自己
    第三周作业
    第二周作业
    PTA编程总结3
    PTA编程总结2
    PTA编程总结1
    2019年春季学期第七周作业.
    2019年春季学期第六周作业.
  • 原文地址:https://www.cnblogs.com/newh5/p/9186714.html
Copyright © 2011-2022 走看看