html頁面關閉、重新整理前提示
阿新 • • 發佈:2019-02-04
var isLoad=false; window.onload = function(){ isLoad=true; }; window.onbeforeunload = function() { var result=getEntity('#update_com_form'); console.log(Object.getOwnPropertyNames(result).length); if(result!=null && Object.getOwnPropertyNames(result).length>0){ return "您的資訊還沒提交,確認要離開此頁面嗎?"; } }; $(window).unload(function(event){ if(!isSaveSuccess && isLoad){ var result=getEntity('#update_com_form'); if(result!=null){ saveTempComInfo(); } } });
發起的網路請求ajax一定要同步:
//儲存草稿 function saveTempComInfo(){ var result=getEntity('#update_com_form'); if(result!=null){ jQuery.ajax({ url:"<@path/>/pages/auditJson/saveTempComInfo", type:'post', dataType: "json", async: false,//必須同步 data:result, timeout:15000, contentType : "application/x-www-form-urlencoded; charset=utf-8", success:function(feedresult){ if(feedresult){ if(feedresult.status){ } } }, complete:function (XMLHttpRequest, textStatus) { if(textStatus=='error'){ log("儲存草稿操作失敗!"); }else if(textStatus=='timeout'){ log('儲存草稿超時,請重新操作'); } } }); } }
原理什麼的不是很透徹,估計是如果是同步方法,瀏覽器會一直等待unload事件去執行,而非同步方法在丟擲請求後直接繼續去執行了unload而丟失了請求而使得請求中斷了。
這裡看到淘寶UED一篇關於研究beforeunload的丟失率的文章,我想如果請求使用這個方法會不會就沒有丟失的情況呢?
網上看了又一篇研究頁面關閉來發送請求的文章,點選這裡他這裡使用的構造一個image物件來發送請求,但是ie和firefox也都是被中斷了,我實驗了下Chrome下是可行的。然後作者也是sleep了1秒來使得ie,firefox來完成。我覺得這個原理應該是ajax同步方式是一樣的,應該是一個阻塞unload觸發前來完成請求的方法,具體不是很懂,等待大牛來解惑-
-!~