iframe加載onload之坑
阿新 • • 發佈:2018-06-15
eight att frame 實現 app 觸發 idt wid 事件
需求:點擊按鈕,下載一個文件,由於種種原因,需要借助iframe實現。
實現:點擊按鈕往頁面上append一個iframe,將iframe的src設置為文件的url路徑,實現下載。如果url不對或文件下載失敗,提示下載失敗。
暢想:iframe.onload=function(){ //下載成功;} iframe.onerror = function(){ //下載失敗 }
問題:想的挺好,可惜瀏覽器有意見。經測試,火狐及chorme都不支持onerror事件,而且,不管iframe加載是否成功,都會觸發onload事件。
解決:奇技淫巧,通過title來判斷頁面是否正常加載。
示例:
varurl = $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之坑