整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
动端的回退键通常是指手机或平板设备上的物理返回键或者虚拟返回键，用户点击该键时通常会引起页面的跳转或关闭，因此也需要在 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小时内与您取得联系。
