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('下載失敗,請縮小查詢范圍后重新嘗試!');
        }
    };

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM