1. 程式人生 > >html頁面關閉、重新整理前提示

html頁面關閉、重新整理前提示

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觸發前來完成請求的方法,具體不是很懂,等待大牛來解惑- -!~