1. 程式人生 > >關於js關閉視窗的事件和用法

關於js關閉視窗的事件和用法

 B/S架構的應用系統,除了需要使用一些動態指令碼語言進行資料庫等一系列伺服器資源的訪問,還需要適當使用客戶端指令碼進行頁面的介面動態顯示、提交伺服器前的預處理、根據使用者的操作行為進行合理的事件處理等等。
你可能認為最流行的語言是Java、Basic、C、C++之類的高階語言,實質上Javascript也是當之無愧的流行語言。它的奧妙遠比你想象中的還要多。如果你看過Google的GMail和Map,你要知道Javascript也可以讓世界變得觸手可及將技術變得爐火燉青的地步。
  本文將從實際中經常遇到的幾個問題入手,著手用Javascript指令碼巧妙解決這些問題,以此拋磚引玉希望給大家帶來幫助。

強制關閉視窗後清除使用者Session

  一般的會員式網站,在會員登陸成功後都會建立會話或者Cookie,然後可以直接在站點間共享會員的資料。而這些資料通常放置在伺服器記憶體中。在會員退出時,按照正常的設計思路是執行退出功能釋放會員登陸成功後所使用的伺服器和客戶端等相關資源。現在經常遇到的問題是,使用者經常直接關閉網頁而不是我們所期望執行的退出程式。這樣就會造成使用者登陸後的資源不會及時釋放而加重伺服器負荷,隨著問題的進一步累積逐步的放大從而影響伺服器的效能。

  有幸的是在網路上找到針對IE瀏覽器捕獲使用者使用Alt+F4、標題欄按右鍵關閉、雙擊標題欄、直接按關閉按鈕的事件的方法。當然對於一些直接關閉程序或者最小化的方式在工作列進行關閉是不能正常捕獲的,但現在所涉及的解決方案,可以解決大多數存在的問題。

<script language="javascript">
function window.onUnload()
{
var newWindow;
if((window.screenLeft>=10000 && window.screenTop>=10000)||event.altKey)
{
newWindow=window.open('退出程式地址','網頁名稱',
'width=0,height=0,top=4000,left=4000');//新視窗將在視區之外開啟
newWindow.opener=null;
sleep(5000);//執行休眠操作以便能夠處理完新開啟視窗執行程式碼
newWindow.close();//新視窗關閉
……//其他需要執行的退出程式序列可參考上面進行新增
}
}
function sleep(milisecond)
{
var currentDate,beginDate=new Date();
var beginHour,beginMinute,beginSecond,beginMs;
var hourGaps,minuteGaps,secondGaps,msGaps,gaps;
beginHour=beginDate.getHours();
beginMinute=beginDate.getMinutes();
beginSecond=beginDate.getSeconds();
beginMs=beginDate.getMilliseconds();
do
{
currentDate=new Date();
hourGaps=currentDate.getHours() - beginHour;
minuteGaps=currentDate.getMinutes() - beginMinute;
secondGaps=currentDate.getSeconds() - beginSecond;
msGaps=currentDate.getMilliseconds() - beginMs;
if(hourGaps<0) hourGaps+=24; //考慮進時進分進秒的特殊情況
gaps=hourGaps*3600+ minuteGaps*60+ secondGaps;
gaps=gaps*1000+msGaps;
}while(gaps<milisecond);
}
</script>
說明:
window.screenLeft = 10000 + 邊框寬 (2×2) = 10004
window.screenTop = 10000 + 工具欄高 + 標題欄高 = 10097
需要說明的,在onBeforeUnload中螢幕這些座標屬性都是正常數值。
screenLeft:獲取瀏覽器客戶區左上角相對於螢幕左上角的 x 座標。
screenTop:獲取瀏覽器客戶區左上角相對於螢幕左上角的 y 座標。

  如果需使用window.location指定URL進行處理,那麼需放在onBeforeUnload 事件中而不是onUnload事件。在onUnload裡不要使用window.close,因為物件銷燬前會立即觸發該事件,無法有效執行由被銷燬物件所引發的引用。而onBeforeUnload是頁面將要被解除安裝前觸發的事件。解決的方法是新開一個視窗再將之關閉。而所謂的清除實質上就是把做好退出功能的頁面,直接以開啟新視窗方式的呼叫。在呼叫到關閉的時候要儘可能停留一段時間確保全部程式碼被有效觸發。需要說明的是onUnload事件,在頁面前進、後退、重新整理、轉向、關閉後都會觸發。因此要捕獲強制關閉視窗的特殊事件,需要在程式碼上加上判斷條件,以保證在符合情形的條件下觸發。該段程式碼已經成功地進行測試。

對話方塊取值



  在網頁中,經常會使用一種類似對話方塊的設計,為了方便使用者輸入、快速選擇經常會開啟一個頁面,再做出選擇後關閉該頁面並將使用者選擇的資料傳遞到父頁面做後續處理。

   前些時間,看到一種比較原始的方法,不是很通用,直接在子頁面裡修改父頁面某個控制元件的數值再加之關閉。這樣做的缺點是,不適合大規模的呼叫。假設父頁面有開始日期與結束日期兩個框需要接受日曆頁面的輸入,那麼你需要做兩個不同的日曆頁面才能保證兩個框都有對應的資料。這在大型工程中是不好的設計方法。多樣化的外部環境,如果不考慮通用的方法,將增加維護的難度同時降低開發的效率。

  IE支援模態視窗,在對話方塊的頁面中通過設定的window.returnValue的數值,在父窗體中靠呼叫window.showModalDialog獲取返回值,無效將返回null(開啟的頁面不存在)或undefined(window.returnValue沒有設定)。我設計了getDialog函式,用於獲取子窗體的返回值,異常或者無效將返回空串否則為正常返回資料。
而原先的window.open方式,我也改進一下設計了getWindowReturnValue,通過偵聽子窗體的window.returnValue,如果有資料將開始終止。如果窗體仍然開啟則自動關閉。同樣兩個函式都需要進行正確的設定window.returnValue。

//在IE中開啟模態對話方塊並返回資料
//需要在開啟頁面設定window.returnValue,錯誤或無效返回空
function getDialog(url)
{
var returnValue;
try
{
returnValue=window.showModalDialog(url);
}catch(e)
{ return ""; }
return (returnValue==null||returnValue=="undefined")?"":returnValue;
}
//使用window.open來獲取子視窗資料,需要動態設定window.returnValue
//引數為:地址、名稱、寬度、高度,不設定寬度與高度請設為0。
function getWindowReturnValue(url,name,width,height)
{
var opener=null;
var spec="toolbar=0,menubar=0,scrollbars=0,resizeable=0";
var returnValue=null;
if(width>0) spec=spec+",width="+String.valueOf(width);
if(height>0)
{
spec=spec+",height="+String.valueOf(height);
}
opener=window.open(url,name,spec);

while(!opener.window.closed)
{
returnValue=opener.window.returnValue;
if(returnValue!=null&&returnValue.length>0) break;
}
if(!opener.window.closed) opener.window.close();
return returnValue;
}

相關推薦

關於js關閉視窗事件用法

 B/S架構的應用系統,除了需要使用一些動態指令碼語言進行資料庫等一系列伺服器資源的訪問,還需要適當使用客戶端指令碼進行頁面的介面動態顯示、提交伺服器前的預處理、根據使用者的操作行為進行合理的事件處理等等。 你可能認為最流行的語言是Java、Basic、C、C++之類的高階語言,實質上Javascrip

JS彈出框、對話方塊、提示框,JS關閉視窗關閉頁面JS控制頁面跳轉

1. RequestDispatcher.forward() 在伺服器端起作用,當使用forward()時,Servlet engine傳遞HTTP請求從當前的Servlet或者是JSP到另外的一個Servlet、JSP 或普通HTML檔案,也即你的form提交至a.jsp,在a.jsp用到了forw

JS 關閉視窗跟重新整理視窗事件

<script type="text/javascript"> <!-- window.onbeforeunload = onbeforeunload_han

JS綁定事件移除事件的處理方法

nbsp 觸發 ner 它的 msu eve code ont 一個 addEventListener()與removeEventListener()用於處理指定和刪除事件處理程序操作。全部的DOM節點中都包括這兩種方法,而且它們都接受3個參數:要處理的事件名、作為事件

原生js關閉視窗

if (navigator.userAgent.indexOf("MSIE") &gt; 0) { if (navigator.userAgent.indexOf("MSIE 6.0") &gt; 0) {

js 的prototype 屬性用法,外加__proto__ JavaScript中__proto__與prototype的關係

var ob = { };//超級簡單的空物件 alert(JSON.stringify(ob.prototype));// undefined 能夠引用prototype的東西絕對是函式,絕對是函式,絕對是函式,prototype是屬於函式的一個屬性,prototype是屬於函式的一個屬性,prototy

js響應id事件獲取input輸入框中class值、id的值

js響應id事件:記得要在外面多加一個$(function(){ ... });$(function(){ $("#publish").click(function(){ //通過class獲

手機端觸控touchmove 關閉預設事件開啟預設事件

<head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-sca

自定義WPF關閉視窗事件觸發的函式

背景:例如我在點選視窗關閉按鈕時候要執行的函式有一個,名為Window_Closing那麼我需要在介面控制元件初始化後新增到Closing中public SerialOption() { InitializeComponent();

js web視窗事件

1 監聽視窗關閉事件,當重新整理或者關閉視窗時,彈出確認框: window.onbeforeunload=function(){ return "你確定離開本頁面嗎?資料不會自動儲存。"; } 2 監聽視窗關閉事件,當視窗關閉時,處理資料: window.onunl

QT攔截關閉視窗事件

QDialog類下有一個虛擬函式 void QDialog::closeEvent ( QCloseEvent * e ) [virtual protected] 通過實現closeEvent函式,就可以以對關閉視窗訊息進行攔截,比如程式還沒有完成工作時,可以彈出警告視窗,即使使用者確認退出操作

js實現"關閉視窗瀏覽器事件並消除session會話,

親測IE,火狐,chrome有效  廢話不多說,上程式碼: ​ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DO

js中的onclick事件JQuery中的click方法以及on方法事件用法總結

1.onclick是繫結的事件(它是一個事件),注意該事件繫結只是JacaScript中有(js中的),Jquery中並沒有此事件,告訴瀏覽器在滑鼠點選時候要做什麼 2.click方法(jquery中的)作用是觸發onclick事件,只要執行了元素的click()方法,就會觸發onclick事件

js判斷瀏覽器的關閉標籤動作重新整理的事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://unpkg.com/v

C#委託事件(WPF實現關閉視窗B時觸發A視窗事件

     遇到一個問題,子視窗關閉時,主視窗如何知道子視窗關閉了,並執行相應的處理事件。為了解決這個問題查閱資料後可以用委託和事件來完成。 一、委託 1、委託:        委託是安全封裝方法的型別,類似於 C 和

JS 跳轉頁面開啟新視窗用法

1.在原來的窗體中直接跳轉用 onClick="window.location.href='你所要跳轉的頁面';" 2、在新窗體中開啟頁面用: onclick="window.open('你所要跳轉的頁面')" 3、返回上一頁 ( 本地測試無效,伺服器上可用) window.history.back(

js keyup、keypresskeydown事件 詳解

rgs spa 小鍵盤 ansi 使用方法 form 單個 sage ges js keyup、keypress和keydown事件都是有關於鍵盤的事件 當一個按鍵被pressed 或released在每一個現代瀏覽器中,都可能有三種客戶端事件。 keydown even

js自定data-*jquery的data()用法

完全 其中 重要 中一 ons 代理 前綴 clas 標簽 一、data-* : data-*是HTML5中的新屬性。 data-*的定義和用法:   data-* 屬性用於存儲頁面或應用程序的私有自定義數據。   data-* 屬性賦予我們在所有 HTML 元素上嵌入

JS點滴】substringsubstr以及slicesplice的用法區別。

[0 相等 交換 top subst char ima cas 負數 那麽就由一道筆試題引入吧,已知有字符串a=”get-element-by-id”,寫一個function將其轉化成駝峰表示法”getElementById”; var a = "get-element-