內(nèi)容首發(fā)于工粽號(hào)：程序員大澈，每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注和投稿！

大家好，我是大澈！

本文約 700+ 字，整篇閱讀約需 1 分鐘。

今天分享一段優(yōu)質(zhì) JS 代碼片段，實(shí)現(xiàn)在關(guān)閉或刷新瀏覽器窗口時(shí)做提示。

老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(qū)留下你的見(jiàn)解！

window.addEventListener('beforeunload', function (event) {
    const confirmationMessage = "確定要離開(kāi)此頁(yè)面嗎？您所做的更改可能不會(huì)被保存。";
 
    event.preventDefault();
    event.returnValue = confirmationMessage; 

    return confirmationMessage;
});

分享原因

這段代碼展示了如何使用 JavaScript 的 beforeunload 事件來(lái)提示用戶(hù)在關(guān)閉或刷新瀏覽器窗口時(shí)確認(rèn)操作，從而避免意外的數(shù)據(jù)丟失或操作中斷。

這種方法適用于 未保存的數(shù)據(jù)（如填寫(xiě)表單或編輯文檔）、長(zhǎng)時(shí)間操作（如文件上傳或大規(guī)模數(shù)據(jù)處理）、敏感操作（如在線(xiàn)交易或重要系統(tǒng)設(shè)置）等場(chǎng)景。

項(xiàng)目中用到時(shí)直接CV，但對(duì)于用戶(hù)體驗(yàn)而言，不宜過(guò)度使用。

代碼解析

1. window.addEventListener('beforeunload', function (event) { ... })

為 window 對(duì)象添加一個(gè) beforeunload 事件監(jiān)聽(tīng)器。

當(dāng)用戶(hù)試圖關(guān)閉或刷新瀏覽器窗口時(shí)，此事件將被觸發(fā)。

2. event.preventDefault();

調(diào)用 event.preventDefault() 方法來(lái)阻止默認(rèn)的瀏覽器行為。

在大多數(shù)情況下，這一步是冗余的，因?yàn)?beforeunload 事件默認(rèn)不會(huì)執(zhí)行任何動(dòng)作，但這可以確保兼容性。

3. event.returnValue = confirmationMessage;

設(shè)置 event.returnValue 為 confirmationMessage 提示信息。

這是確保在大多數(shù)現(xiàn)代瀏覽器中顯示確認(rèn)對(duì)話(huà)框的關(guān)鍵步驟。

4. return confirmationMessage;

返回 confirmationMessage 提示信息。

在一些舊版瀏覽器中，這一步是必要的，以確保顯示提示信息。

閩南網(wǎng)]

很多人在平時(shí)瀏覽網(wǎng)頁(yè)的時(shí)候，或許都會(huì)發(fā)現(xiàn)一些事情，當(dāng)你發(fā)現(xiàn)一篇好文章或者是一些有趣的東西時(shí)，想復(fù)制卻不能復(fù)制，相信很多人遇到不少這樣的問(wèn)題，那么這種情況該怎么解決呢，下面就和小編一起來(lái)看看吧!

方法1

1打開(kāi)目標(biāo)網(wǎng)頁(yè)，選中網(wǎng)頁(yè)的地址欄。(這里以360瀏覽器為例)

2在地址欄輸入下行代碼，全部輸入。

javascript：void($={});

按下回車(chē)鍵(Enter)，破解完成。(回車(chē)后不會(huì)跳轉(zhuǎn)網(wǎng)頁(yè))

3注意，如果網(wǎng)頁(yè)被刷新，限制會(huì)恢復(fù)，需要重新輸入代碼。

方法2

1打開(kāi)右上角工具，選擇最后的選項(xiàng)

2選擇 高級(jí)設(shè)置-網(wǎng)頁(yè)設(shè)置，點(diǎn)擊 網(wǎng)頁(yè)內(nèi)容高級(jí)設(shè)置

3找到 JavaScript選項(xiàng)-不允許任何網(wǎng)站運(yùn)行 JavaScript

4完成，關(guān)閉選項(xiàng)標(biāo)簽頁(yè)。(做完之后可以調(diào)回去)

方法3

用瀏覽器隨便打開(kāi)一個(gè)網(wǎng)頁(yè)，添加到收藏夾，最好放到瀏覽器的標(biāo)簽欄，方便使用。這里以百度為例

添加之后右鍵選擇編輯，修改名字為【破解限制】，在地址欄粘貼以下代碼

javascript：(function{eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function{return'\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c]);return p}('5 2=8;5 3=2.K;3.7=3.k=3.e=3.9=3.6=3.y=3.7=3.z=2.7=2.k=2.e=2.9=2.6=4;2.7=2.6=2.c=2.9=p{r t};g(8.n||8){d=4;c=4;6=4}5 a=8.15(\'*\');o(5 i=a.q-1;i>=0;i--){5 b=a[i];g(b.n||b){d=4;c=4}}s(h(\'%u%v%w%x%j%17%A%B%C%j%D\')+\'\E\'+h(\'%F%G%H%I%J%l%L%l%M%N%O%P%Q%R%S%T%U%V%W%X%Y\')+\'\Z.10.11\');3.m.13=\'14!f\';3.m.16=\'12!f\';',62,70,'||doc|bd|null|var|oncontextmenu|onselectstart|document|onkeydown|arAllElements|elmOne|onmousedown|onmouseup|onpaste|important|with|unescape||u5236|oncopy|u7528|style|wrappedJSObject|for|function|length|return|alert|true|u5DF2|u89E3|u9664|u590D|onmousemove|ondragstart|u53F3|u952E|u9650|uFF01|u000d|u66F4|u591A|u7CBE|u5F69|u5B9E|body|u5e94|uFF0C|u8BF7|u5173|u6CE8|u300E|u0065|u5f27|u5ea6|u7535|u5b50|u5546|u52a1|u300F|u000dwww|ehudu|com|text|webkitUserSelect|auto|getElementsByTagName|MozUserSelect|u4E0E'.split('|'),0,{}))})

保存，完成。打開(kāi)需要破解的網(wǎng)頁(yè)，點(diǎn)一下剛才創(chuàng)建的標(biāo)簽，破解完成，但每次打開(kāi)網(wǎng)頁(yè)都需要點(diǎn)一下破解的標(biāo)簽。要求：瀏覽器必須能執(zhí)行javascript代碼，其它瀏覽器添加書(shū)簽類(lèi)似。

方法4

使用Ctrl+A選擇網(wǎng)頁(yè)全部文字，Ctrl+C復(fù)制，新建文本檔案，Ctrl+V粘貼，刪除不需要的文字。(這個(gè)方法只適用于網(wǎng)頁(yè)內(nèi)容無(wú)法選中的網(wǎng)頁(yè)，有時(shí)候會(huì)無(wú)法復(fù)制，這時(shí)候就需要用到上面的方法了)

頁(yè)編程之自動(dòng)刷新。

各位同學(xué)好，今天我們來(lái)分享一下如何設(shè)置網(wǎng)頁(yè)自動(dòng)刷新和延時(shí)跳轉(zhuǎn)。我們都知道，在瀏覽器中點(diǎn)擊刷新按鈕或者按下F5鍵可以刷新頁(yè)面，但在編程中有時(shí)需要自動(dòng)刷新頁(yè)面，加載最新的數(shù)據(jù)，無(wú)需用戶(hù)參與。這就是我們今天要講的內(nèi)容。

接下來(lái)讓我們來(lái)看看效果如何。

·首先，在頁(yè)面上添加了一個(gè)滾動(dòng)字幕和一張GIF動(dòng)畫(huà)，用于展示頁(yè)面的刷新?tīng)顟B(tài)。

·現(xiàn)在可以看到，每隔3秒自動(dòng)刷新一次，每當(dāng)刷新時(shí)，字幕會(huì)回到初始位置，動(dòng)畫(huà)也會(huì)重新播放。

·如果不明顯，可以看到鼠標(biāo)指到的位置會(huì)不停地觸發(fā)刷新按鈕，效果已經(jīng)很明顯了。

現(xiàn)在讓我們來(lái)看看實(shí)現(xiàn)代碼。自動(dòng)刷新使用了meta標(biāo)簽的http-equiv屬性，值為referesh，表示自動(dòng)刷新。設(shè)置了content屬性，在內(nèi)容中填寫(xiě)秒數(shù)，即每隔多少秒自動(dòng)刷新頁(yè)面。如果設(shè)置為3，則每隔3秒自動(dòng)刷新頁(yè)面，非常簡(jiǎn)單。

·延時(shí)跳轉(zhuǎn)的實(shí)現(xiàn)也很簡(jiǎn)單。剛才已經(jīng)將Content屬性設(shè)置為3，現(xiàn)在只需要指定要跳轉(zhuǎn)到的URL。它的寫(xiě)法是在3后面加上一個(gè)英文分號(hào)，然后加上url等于要跳轉(zhuǎn)到的地址。在這里，我們跳轉(zhuǎn)到新浪首頁(yè)，例如視頻。這樣寫(xiě)好后，回到瀏覽器保存，可以看到倒計(jì)時(shí)321，成功跳轉(zhuǎn)。在指定時(shí)間后，瀏覽器會(huì)自動(dòng)跳轉(zhuǎn)，功能已經(jīng)實(shí)現(xiàn)。

今天的分享就到這里，希望各位同學(xué)可以照著寫(xiě)3遍，做到不看視頻也能寫(xiě)出來(lái)。所有案例和相關(guān)文檔都可以向我索取。

我們下期再見(jiàn)，想學(xué)編程可以關(guān)注網(wǎng)頁(yè)編程、服務(wù)端編程、數(shù)據(jù)庫(kù)和算法方面的內(nèi)容。

點(diǎn)贊支持一下。