子比主题教程：前台发布文章离开页面自动保存提示

很多站长与前台投稿用户在撰写、编辑文章时，经常会出现误关浏览器标签、意外退出页面的情况，未保存的文章内容会直接丢失，白白浪费大量编辑时间。

本次分享的代码功能，专门针对子比主题前台文章发布、编辑页面优化，开启后用户在前台创作文章过程中，若页面存在未保存的修改内容，关闭浏览器、刷新页面或退出网页时，系统会自动弹出浏览器原生提示弹窗，提醒用户留存草稿、确认操作，从根源上避免文章内容意外丢失，大幅提升前台投稿体验。

该功能适配子比主题前台新建文章、编辑文章页面，轻量化JS脚本无冗余，不占用网站资源，兼容WordPress自带TinyMCE编辑器，运行稳定无冲突。

代码部署方法

部署位置

登录WordPress网站后台，进入子比主题设置界面，找到自定义底部HTML代码选项，将下方完整代码粘贴至输入框内，修改对应域名后保存即可生效。

完整功能代码

关键修改与适配说明

1. 域名替换：代码中 https://www.你的域名.cn 需替换为自己的网站真实域名，否则功能无法正常识别保存状态。

2. 页面白名单：代码默认适配前台新建文章 /newposts、文章编辑 /posts-edit/ 页面，仅在投稿编辑页面触发提示，不会影响网站其他页面正常运行。

3. 智能监听机制：脚本可实时监听编辑器内容、输入框、文本域、选择框的内容变动，精准识别未保存操作；文章正常提交保存后，会自动重置状态，不会误触发弹窗提示。

功能优势

1. 精准触发：仅前台投稿编辑页面生效，全局无冗余加载，不影响网站访问速度。

2. 全面监听：适配WordPress默认编辑器与所有表单输入项，不漏判任何内容修改操作。

3. 体验友好：原生浏览器弹窗提示，简洁直观，用户可自主选择离开或继续编辑保存内容。