活力39282
在线时间13640 小时
阅读权限200
管理员
自由的灵魂
- 积分
- 107434
- 主题
- 5630
- 回帖
- 26661
- 注册时间
- 2003-4-10
- 最后登录
- 2026-10-2
|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有账号?立即注册
×
1、问题缘起
手机版发送短消息成功后,会弹出"操作成功"提示窗口,用户需要手动点击"确定"才能继续操作,打断了对话流程,降低了聊天效率。用户希望发送短消息后直接上屏,无需额外点击。
探讨过程中提出的独立问题汇总:
| 序号 | 问题 | 尝试方案 | 结果 | | 1 | 修改语言包 do_success | 全局替换 | ❌ 影响所有"操作成功"提示 | | 2 | 修改 showmessage 参数 | 添加 showdialog=>false | ❌ 手机版不生效 | | 3 | 修改 spacecp_pm.php 直接跳转 | 使用 dheader 跳转 | ❌ 消息未写入数据库,不上屏 | | 4 | 使用 register_shutdown_function 延迟跳转 | 脚本结束后跳转 | ❌ 白屏 | | 5 | 在 showmessage.htm 模板中拦截 | 判断 do_success 后跳转 | ❌ 报"表单提交异常" | | 6 | 在 showmessage.htm 用 JS 跳转 | 用 window.location.href | ❌ 报503错误 | | 7 | 修改 formdialog 成功回调 | 关闭弹窗并刷新页面 | ⚠️ 发送过快提示也被拦截 | | 8 | 区分成功与错误消息 | 判断 msg 内容决定是否刷新 | ✅ 成功 |
2、解决方案
(1)简要技术分析
在 formdialog 的 AJAX 成功回调中,判断服务器返回的消息内容:若包含"操作成功"或"do_success"则为成功,关闭加载动画并延迟刷新页面;否则为错误信息,正常弹窗提示。
(2)修改文件列表
| 操作 | 文件路径 | | 修改 | static/js/common.js(或 static/js/mobile/common.js) |
(3)关键作用代码
文件:static/js/common.js
formdialog.init 方法完整替换为:
- var formdialog = {
- init : function() {
- $(document).on('click', '.formdialog', function() {
- popup.open('<img src="' + IMGDIR + '/imageloading.gif">');
- var obj = $(this);
- var formobj = $(this.form);
- var isFormData = formobj.find("input[type='file']").length > 0;
- $.ajax({
- type:'POST',
- url:formobj.attr('action') + '&handlekey='+ formobj.attr('id') +'&inajax=1',
- data:isFormData ? new FormData(formobj[0]) : formobj.serialize(),
- dataType:'xml',
- proceSSData:isFormData ? false : true,
- contentType:isFormData ? false : 'application/x-www-form-urlencoded; charset=UTF-8'
- })
- .success(function(s) {
- var msg = s.lastChild ? s.lastChild.firstChild.nodeValue : '';
- if ((andriod || ios) && formobj.attr('id') == 'pmform') {
- if (!msg || msg.indexOf('操作成功') !== -1 || msg.indexOf('do_success') !== -1) {
- popup.close();
- setTimeout(function() {
- window.location.reload();
- }, 300);
- } else {
- popup.close();
- popup.open(msg);
- evalscript(msg);
- }
- } else {
- popup.open(msg);
- evalscript(msg);
- }
- })
- .error(function() {
- if ((andriod || ios) && formobj.attr('id') == 'pmform') {
- popup.close();
- setTimeout(function() {
- window.location.reload();
- }, 300);
- } else {
- popup.open('表单提交异常,无法完成您的请求', 'alert');
- }
- });
- return false;
- });
- }
- };
复制代码
3、最终实现效果
| 场景 | 修改前 | 修改后 | | 短消息发送成功 | 弹出"操作成功"弹窗,需点击确认 | 无弹窗,0.3秒后自动刷新,新消息上屏 | | 发送过快(触发限制) | 弹出错误提示 | 正常弹出错误提示(保留) | | 其他表单提交 | 正常弹窗 | 正常弹窗(不受影响) | | PC版 | 正常弹窗 | 正常弹窗(不受影响) |
4、重要技术沉淀
关键踩坑点:
- 电脑浏览器的 F12 设备仿真模式下 navigator.platform 仍为 Win32/MacIntel,andriod/ios 变量为 false,无法模拟手机端行为。必须用真实手机测试,或在控制台手动重写 navigator.defineGetter 模拟环境。
- 直接 dheader('Location') 跳转会导致数据库写入未完成,新消息不上屏;必须延迟300ms刷新。
- 不能简单注释 interval_check,否则会移除"发送过快"提示,影响用户体验。
- 成功与错误必须区分处理:成功时静默刷新,错误时正常弹窗。
5、进一步优化的可能性
- 将延迟刷新改为增量更新(通过 AJAX 获取最新消息并插入 DOM),避免整页刷新,体验更流畅。(没有闪烁感,可以接受)
- 将判断逻辑从 msg.indexOf('操作成功') 改为更稳定的标识(如服务器返回 status: 'success' 的 JSON 格式),避免因语言包修改导致判断失效。(等出问题再说)
- 将 PC 版也应用同样的静默发送逻辑,保持全平台体验一致。(不需要,本来就弹窗)
|
|