整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
動端的回退鍵通常是指手機或平板設備上的物理返回鍵或者虛擬返回鍵，用戶點擊該鍵時通常會引起頁面的跳轉或關閉，因此也需要在 JavaScript 中對該事件進行監聽和處理。
本篇文章將為您提供如何使用 JavaScript 監聽移動端回退鍵事件的多種方法，以及如何在處理事件時避免一些常見的問題。
一、使用 popstate 事件監聽回退鍵
在 JavaScript 中，可以使用 `window.history` 對象的 `popstate` 事件監聽用戶在瀏覽器中點擊了回退或前進按鈕的事件，該事件支持移動設備上的回退鍵，使用方法如下：
```js
window.addEventListener('popstate', function() {
// 處理回退鍵事件
});
```
`popstate` 事件會在用戶點擊瀏覽器的回退或前進按鈕或者在 JavaScript 中調用 `history.back()` 或 `history.forward()` 方法時觸發，而在移動端，用戶點擊系統上的回退鍵同樣也會觸發該事件。
需要注意的是，使用 `popstate` 事件監聽回退鍵時，不能使用 `history.pushState()` 方法修改頁面的 URL，因為該方法只會在瀏覽器的歷史記錄中添加一條新記錄，并不會觸發 `popstate` 事件。如果需要修改頁面的 URL 并觸發 `popstate` 事件，可以使用 `history.replaceState()` 方法。
二、使用 onbeforeunload 事件監聽回退鍵
除了`popstate`事件，還可以使用`onbeforeunload`事件監聽回退鍵，使用方法如下：
```js
window.onbeforeunload=function() {
// 處理回退鍵事件
};
```
`onbeforeunload`事件會在窗口或標簽頁關閉或重新加載之前觸發，如果用戶點擊了系統上的回退鍵，則會取消頁面的關閉或重新加載操作，因此可以在該事件中處理回退事件。
需要注意的是，由于瀏覽器安全策略的限制，無法在 `onbeforeunload` 事件中彈出任何提示框，只能返回一個字符串值，該值將被瀏覽器作為提示內容顯示在提示框中。
三、多種方法結合使用
除了上述兩種方法外，還可以將它們結合起來使用，以達到更好的效果，具體步驟如下：
1. 使用 `pushState()` 方法修改頁面的 URL。
```js
history.pushState(null, null, 'newpage.html');
```
2. 立即使用 `location.reload()` 方法重新加載頁面。
```js
location.reload();
```
使用這種方法，即使沒有真正跳轉到新頁面，也可以觸發 `popstate` 事件，從而實現監聽移動端回退鍵事件的功能。
在處理回退事件時，通常需要判斷當前頁面是否是最后一頁，如果是最后一頁，則直接關閉或返回到前一個頁面，否則繼續回退到上一個頁面。
下面給出一個完整的示例代碼：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>監聽手機回退鍵事件</title>
</head>
<body>
<h1>監聽手機回退鍵事件</h1>
<p>點擊下面的按鈕跳轉到新頁面</p>
<button onclick="goToNewPage()">跳轉</button>
<script>
// 添加 popstate 事件監聽器
window.addEventListener('popstate', function() {
console.log('用戶點擊了系統回退按鈕');
// 判斷頁面是否是最后一頁
if (history.length==1) {
// 關閉當前頁面
window.close();
} else {
// 回退到上一個頁面
history.back();
}
});
// 添加 onbeforeunload 事件監聽器
window.onbeforeunload=function() {
console.log('用戶點擊了系統回退按鈕');
// 判斷頁面是否是最后一頁
if (history.length==1) {
// 關閉當前頁面
window.close();
}
};
// 跳轉到新頁面
function goToNewPage() {
history.pushState(null, null, 'newpage.html');
location.reload();
}
</script>
</body>
</html>
```
在該示例代碼中，我們實現了監聽 `popstate` 事件和 `onbeforeunload` 事件的功能，并且在頁面中添加了一個按鈕，當用戶點擊該按鈕時，會使用 `history.pushState()` 方法將頁面的 URL 改變，然后使用 `location.reload()` 方法重新加載頁面，這樣就可以觸發 `popstate` 和 `onbeforeunload` 事件了。
需要注意的是，因為 `pushState()` 方法只是修改了頁面的 URL，并沒有真正跳轉到新頁面，所以為了能夠處理回退事件，我們需要在 `pushState()` 方法后面立即調用 `location.reload()` 方法，這樣瀏覽器就會認為我們跳轉到了新頁面，然后在回退時就可以觸發 `popstate` 和 `onbeforeunload` 事件了。
同時，我們還在事件處理函數中添加了判斷頁面是否是最后一頁的代碼，如果是最后一頁，則直接關閉或返回到前一個頁面。如果不加這個判斷，當用戶點擊回退鍵時，頁面會一直回退到瀏覽器的起始頁面，這樣就無法正常退出應用了。
總結：
本篇文章介紹了如何使用 JavaScript 監聽移動端回退鍵事件，并提供了多種方法及相應的示例代碼。對于需要在移動端開發中處理回退事件的開發人員來說，這些方法都是非常實用的，可以有效地解決移動端回退事件的問題。
TML頁面功能的使用（Webserver）:
通過SIMATIC HMI 面板集成的HTML頁面功能將HMI設備組態為HTTP服務器，實現PC端與精智面板之間的文件傳遞等功能。
1. 功能組態
需注意：HTML頁面功能僅支持精智面板（Comfort Panel）和二代移動面板（2nd Mobile Panel）。
在觸摸屏項目"運行系統設置"的“服務”中激活HTML頁面功能:
2. 功能設置
把要監控的數據在 觸摸屏變量表里找到屬性勾選優良生產規范;
下載項目至實際硬件后，在觸摸屏控制面板的“WinCC Internet Settings”中會增加"Web Server"選項; win+c 可以進入觸摸屏設置;
在"Tag authenticate"組中確定訪問服務器操作設備變量的驗證方式，“No authentication”為無需驗證，“Authentication required”為訪問需要密碼。
在“Tag acces”組中確定訪問服務器操作設備變量的方式，“Read/write”為讀取訪問和寫訪問，“Read Only”為讀取訪問。
點擊“User Administration”按鈕進入“UserDatabase-Edit”界面，如下圖所示。自行設置默認用戶“Administrator”的密碼和確認密碼，密碼和確認密碼必須保持一致。如果需要登錄新的用戶，可以點擊"New"按鈕新建用戶，同時輸入用戶名和密碼后，點擊“Apply”確認設置。
3. 功能使用
在PC端使用瀏覽器進行訪問，在瀏覽器地址欄中輸入https://觸摸屏的IP地址，例如：https://192.168.101.120。輸入設置的用戶名和密碼。需注意：用戶名是區分大小寫的。如果需要瀏覽外部存儲介質的文件，例如下載或者上傳文件，點擊“File Browser”就可以看到存儲介質。
家好，自CSS3誕生之日起，網頁特效較之以往變得越來越簡單，樣式也越來越多，那么今天我們來分享下所謂幽靈按鈕的實現方法，首先我們來看下效果：
幽靈按鈕
基本結構圖解
由上圖不難看出，該示例主要由三部分組成，每部分各包含一個圖標（由背景圖像生成）和一個按鈕（由帶邊框的超鏈接生成），按鈕中有一個右指向的箭頭（也由背景圖像生成），除此之外，在效果圖中，當鼠標滑過按鈕時有四條線從四個方向飛入與按鈕邊框重合，這個可以用四對標簽生成，之后通過CSS設置效果。
綜上可得html結構如下：
HTML結構
基本樣式：消除默認樣式，給一個背景顏色，外圍盒子設置一定的寬高并居中對齊。
基本樣式
基本布局：通過浮動實現三列布局，設置相應的寬高和外邊距。
基本布局
圖標背景設置：給用于放置圖標背景的設置inline-block,并給定相應的寬高，然后三個圖標分別以背景圖像的方式添加，并根據實際效果調整大小（要略小于父元素框，因為后面有放大的動畫效果），居中放置。
背景圖標設置
圖標動畫設置：設置鼠標滑過動畫這里主要用到兩個動畫效果，一個是旋轉rotate一個是縮放scale,這里要強調的一點是CSS3中很多動畫效果都需要配合配合過渡屬性transiton使用，否則過渡時長為0，就不會呈現動畫效果，呈現的是動畫后的最終狀態。
圖標動畫
按鈕樣式設置：這里的按鈕由一個超鏈接生成，首先將其display屬性設置為block，給定適當的寬高，2個像素透明度為0.7的邊框（設置透明度是為了后面邊框飛入動畫附帶邊框變亮效果），右指向箭頭由背景圖像生成，根據情況設置合適的大小放在靠右的位置，設置position和transition屬性為后面定義動畫做準備。
按鈕樣式
添加按鈕動畫：首先設置鼠標滑過時邊框變亮，右指向箭頭向右移動10個像素
述
接下來就是邊框飛入效果，這里我們只以上邊框為例，首先設置起始狀態時的樣式（也是公用部分），從效果圖中可以看出，飛入的邊框開始時在上邊框的水平左側但是看不見的，所以給background屬性設為none寬度設為0，給一個2個像素的高度，與固有邊框相同，position為絕對定位left:-100%（top給了一個-1px是根據實際效果調的）。
當鼠標滑過時開始出現，背景變為白色(開始顯現），寬度逐漸變為180px與固有邊框接近，位置最終向右移動到left:-1px的位置。
此處的原理是：開始時設置一個狀態和位置，鼠標滑過時設置一個狀態和位置，然后通過transition過渡屬性使其慢慢呈現出來，產生動畫效果。
公共部分
top
其余部分設置可根據上邊框做相應變化得到，下面給出剩余代碼：
bottom
left
right
聲明：本人也是小白一枚，此文只為相互交流，未經修改，如有錯誤請多指正！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
