離開頁面确認主要是利用了onbeforeunload事件，存 在着相容問題 當該事件聲明為 ：
<body onbeforeunload ="return pagebeforeunload(event);" >
<script type ="text/javascript" >
function pagebeforeunload(evt){
return ' are you sure you want to leave this page? ' ;
}
</script>
另外一種方式是把onbeforeunload聲明為：
<body onbeforeunload="pagebeforeunload(event);">
在該種方式下，将不會彈出系統預設的離開确認對話框 ，此時可以在pagebeforeunload函數内部，通過調用confirm方法進行确認，這種方式的好處是，即便在使用者确認離開頁面的時候，也可以進行必要的狀态儲存操作。此時pagebeforeunload的代碼可以寫成：
function pagebeforeunload(evt){
var confirm = window.confirm(' are you sure to leave this page?');
if (confirm == true ){
// 添加必要的處理邏輯
}
}
最近在開發中有這樣一個需求：
如果在進行操作但未儲存的情況下 點選頂部其它頁面連結，則彈出提示框，
1、點選“确定”進入所點頁面并關閉本視窗；
2、點選“取消”或“x”，取消本次跳轉操作并關閉本視窗。
不知道别人怎麼做，我想出來的算法是：
1、取到form内所有表單的值，
2、把表單鍵值對轉化為hash對象，
3、把hash對像轉化為數組，
4、把數組拼接成字元串，
5、然後比較兩個字元串是否相等。
/**
* 把表單内容轉換為hash對象
* @public
* @param {htmlelement} form對象
* @return {ohash}
* @author footya | [email protected]
* @update 2009-8-10 修改自alz架構
* @example
* formtohash(document.forms[0]);
*/
function formtohash(form) {
var ohash = {};
var el;
for (var i = 0, len = form.elements.length; i < len; i++) {
el = form.elements[i];
if (el.name == "") continue;
if (el.disabled) continue;
switch (el.tagname.tolowercase()) {
case "fieldset":
break;
case "input":
switch (el.type) {
case "radio":
if (el.checked)
ohash[el.name] = el.value;
break;
case "checkbox":
if (el.checked) {
if (!ohash[el.name])
ohash[el.name] = [el.value];
else
ohash[el.name].push(el.value);
}
case "button":
case "image":
default:
ohash[el.name] = el.value;
}
case "select":
if (el.multiple) {
//alert(el.name);
for (var j = 0, lens = el.options.length; j < lens; j++) {
if (el.options[j].selected) {
ohash[el.name] = [el.options[j].value];
ohash[el.name].push(el.options[j].value);
}
} else {
ohash[el.name] = el.value;
default:
ohash[el.name] = el.value;
}
}
el = null;
return ohash;
* 把含有表單資料的hash對象轉化為數組
* @param {obj} hash對象
* @return {array}
* var adata = formhashtoarray(hash);
function formhashtoarray(hash) {
var a = [];
for (var k in hash) {
if (typeof(hash[k]) == "string") {
a.push(k + "=" + encodeuricomponent(hash[k]));
else {
for (var i = 0, len = hash[k].length; i < len; i++) {
a.push(k + "=" + encodeuricomponent(hash[k][i]));
}
return a;
調用這兩個方法來實作字元串對比,submit不觸發onbeforeunload
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html lang='zh-cn' xml:lang='zh-cn' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<form name="test">
<input type="text" name="pic"/>
<a href="http://www.baidu.com">aa</a>
<input type="radio" name="radio" value="1"/>
<input type="submit" onclick="filter = false;" value="送出"/>
<a href="#" onclick="filter = false;document.test.submit();">連結送出</a>
</form>
<script>
var filterform = document.test;
var formhashin = formtohash(filterform);//記錄表單的初始狀态
var filter = true; //臨時設false不彈框
/***change window***/
function outwrite(e){
var event = window.event||e;
event.returnvalue = "您修改的設定尚未儲存，确定要離開嗎？";
}
window.onbeforeunload = function(e){//解除安裝頁面時再擷取一次表單狀态,監聽
var formhashout = formtohash(filterform);
if(!comparehash(formhashin, formhashout)&&filter){
try{outwrite(e)}catch(exp){};
}
};
//比較兩個hash對象是否相等。
function comparehash(hash1,hash2){
var h1 = formhashtoarray(hash1).join("-");
var h2 = formhashtoarray(hash2).join("-");
if(h1 == h2){
return true;
}else{
return false;
}
</script>
<html>