1. 程式人生 > >iframe加載onload之坑

iframe加載onload之坑

eight att frame 實現 app 觸發 idt wid 事件

需求:點擊按鈕,下載一個文件,由於種種原因,需要借助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(‘下載失敗,請縮小查詢範圍後重新嘗試!‘); } };

iframe加載onload之坑