關閉瀏覽器用js監聽, 可向伺服器傳送請求
上傳頁面使用者開始上傳檔案之後使用者點選任意跳轉都需要彈出提示層進行二次確定才允許他進行跳轉,這樣做的目的是為了防止使用者的錯誤操作導致這珍貴的UGC 流失(通常使用者在一次上傳不成功之後,很容易就會打消了上傳的念頭的了,或去到其他平臺進行上傳)。
在這裡用到的是 onbeforeunload 事件。下面就梳理下 onunload、onbeforeunload 這兩個事件
onunload,onbeforeunload都是在重新整理或關閉時呼叫,可以在<script>指令碼中通過 window.onunload來呼叫。區別在於onbeforeunload在onunload之前執行,它還可 以阻止onunload的執行。
onbeforeunload 是正要去伺服器讀 取新的頁面時呼叫,此時還沒開始讀取;而onunload則已經從伺服器上讀到了需要載入的新的頁面,在即將替換掉當前頁面時呼叫。
onunload事件
瀏覽器解除安裝頁面後執行的事件, 雖然網上的資料沒說什麼相容性的問題,但是實踐發現相容性並不理想。
使用方法
//JS document window.onunload = function(){ alert("unload is work"); }
瀏覽器相容情況
IE6,IE7,IE8 中 重新整理頁面、關閉瀏覽器之後、頁面跳轉之後都會執行;
IE9 重新整理頁面 會執行,頁面跳轉、關閉瀏覽器不能執行;
firefox(包括firefox3.6)
Safari 重新整理頁面、頁面跳轉之後會執行,但關閉瀏覽器不能執行;
Opera、Chrome 任何情況都不執行。
onbeforeunload事件
頁面跳轉時觸發的事件。
使用方法
//JS document window.onbeforeunload = function(){ return "onbeforeunload is work"; }
return 的值 為你需要告訴使用者的提示資訊如上面demo的話瀏覽器的提示是這樣(firefox 並不支援文字提醒):
值得注意的是,網上流傳說 可以通過檢查 e.clientX e.clientY 判斷 使用者是否點選 右上角關閉瀏覽器的,但是實踐發現 只有 IE6,IE7,IE8 能獲取得到具體數值,其他瀏覽器均為 undefined。
瀏覽器相容情況
IE、Chrome、Safari 完美支援
Firefox 不支援文字提醒資訊
Opera 不支援
IE6,IE7 使用 onbeforeunload 遇到的bug
凡是 <a> 標籤 都會觸發 onbeforeunload事件 包括 href=”javascript:void(0)” 這種。
在IE6,IE7 下面 點選 裡面的 a 標籤,蛋疼的事情就發生了。
解決方法:給這 a標籤的 父級 新增 onclick=function(){return false} 即可,不過添加了這個之後 要確保 父級裡面沒有 input type=”checkbox” 的標籤,否則會導致其無效不可點選。
相關推薦
關閉瀏覽器用js監聽, 可向伺服器傳送請求
上傳頁面使用者開始上傳檔案之後使用者點選任意跳轉都需要彈出提示層進行二次確定才允許他進行跳轉,這樣做的目的是為了防止使用者的錯誤操作導致這珍貴的UGC 流失(通常使用者在一次上傳不成功之後,很容易就會打消了上傳的念頭的了,或去到其他平臺進行上傳)。在這裡用到的是 onbefo
手機端滑動事件監聽,可繫結多個DIV
自己寫的DEMO僅供學習 <!doctype html> <html> <head> <meta charset="utf-8"> <tit
用javascript監聽頁面上的所有ajax請求
最近碰到一個很糾結的技術問題。 我們自己是個Grails,集成了另外一個web程式,我們把那個web程式放在我們提供的iframe裡。那個web程式只有在第一次初始化的時候是一個普通的HTTP請求,之後在頁面上的操作,都是通過ajax來操作的。現在我們有個需求,我們需要知道
js向伺服器傳送請求,獲取伺服器時間
1.開啟開發者工具中的console 2.複製下面程式碼 ajax() function ajax(option){ var xhr = null; if(window.XMLHttpRequest){ xhr = new window.
js監聽瀏覽器關閉事件(區分重新整理和關閉,相容IE9,10,11,Edge,Chrome和Firefox)
由於各瀏覽器相容性不同,所以首先要先區分各瀏覽器 var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串 var isOpera = userAgent.indexOf("Opera") > -1; //判斷是否Oper
js監聽PC/手機/微信瀏覽器後退按鈕事件,可跳轉到指定頁面;
$(document).ready(function (e) { var counter = 0; if (window.history && window.history.pushState) {
js監聽瀏覽器重新整理或者關閉 window.onbeforeunload
js監聽瀏覽器重新整理或者關閉 需要jquery.js的支援 <script> window.onbeforeunload = function() { return "您確
js監聽瀏覽器關閉
方式一:(適用與IE瀏覽器,而且重新整理不提示,只在點選瀏覽器關閉按鈕的時候提示) <script type="text/javascript"> window.onbeforeunload=onclose; function onclose() { if(e
js監聽瀏覽器,關閉,重新整理(相容IE6+,Firefox,Chrome,Safari)
js阻止瀏覽器關閉 重新整理、js監聽瀏覽 關閉 重新整理;對Alt+F4 、右鍵關閉 都起作用 var UnloadConfirm = {}; UnloadConfirm.MSG_UNLOAD = "資料尚未儲存,離開後可能會導致資料丟失\n\n您確定要離開嗎?";
js中添加監聽,判斷是什麽事件
什麽 contain 添加 current src ner type $apply test window.addEventListener(‘message‘, function (event) { if (event.data.type === "
用jQuery監聽瀏覽器窗口的變化
blog zoom nth out ccf on() pre query color 1 $(window).resize(function () { //當瀏覽器大小變化時 2 alert($(window).height());
js監聽瀏覽器返回事件
tlist cat blog eve class IT sta OS stat $(function(){ pushHistory(); window.addEventListener("popstate", function(e) { w
JS監聽頁面----無鼠標鍵盤動作,自動跳頁
bsp .proto baidu screen ati event nbsp span onload function ScreenSaver(settings){ this.settings = settings;
圖形用戶界面之添加監聽,實例化
IT main round ID end AD generated 圖片 ima package 圖形用戶界面1;import java.awt.*;//import java.awt.event.ActionEvent;//import java.awt.event.Wi
JS監聽微信、支付寶等移動app及瀏覽器的返回、後退、上一頁按鈕的事件方法
on() 移動app 自己的 win 功能 監聽 ner tor event $(function(){ pushHistory(); window.addEventListener("popstate", function(e) { alert("我監聽到
JS監聽手機端瀏覽器的後退按鈕的事件方法
轉載地址:http://www.jb51.net/article/89921.htm 首先我們要了解瀏覽器的history。 大家知道在頁面中我們可以使用javascript window history,後退到前面頁面,但是由於安全原因javascript不允許修改his
JS 監聽瀏覽器各個標籤間的切換
這篇文章是別人寫的,覺得挺實用就搬過來了,跟大家分享一下。 以前看到過一些網頁,在標籤切換到其它地址時,網頁上的標題上會發生變化,一直不知道這個是怎麼做的,最近查了一些資料才發現有一個 visibilitychange 事件就可以搞定,這裡將介紹一下頁面可見性(Page Visibility)API的簡單應
vue.js watch監聽,vue.js 監聽watch
vue.js watch監聽,vue.js 監聽watch ================================ ©Copyright 蕃薯耀 2018年12月06日 http://fanshuyao.iteye.com/ <
【浮動導航欄的定位】JS監聽動態頁面元素距離底部距離,並修改定位樣式
需求:一個定位position:fixed;的選單欄,移動到底部時依然存在,影響頁面美觀,我們希望當滾輪移到頁面末尾時選單欄更換為絕對定位。 解決:JS沒有直接獲取元素距離頁面底部距離的函式,因此可利用全文高度-當前高度取得差值來間接判斷。 <!DOCTYPE html
JS事件繫結,事件監聽,事件委託
在JavaScript的學習中,我們經常會遇到JavaScript的事件機制,例如,事件繫結、事件監聽、事件委託(事件代理)等。這些名詞是什麼意思呢,有什麼作用呢? 事件繫結 要想讓 JavaScript 對使用者的操作