Pjax 无刷新导航踩坑记:脚本重建与全局对象失效
AI 摘要
登录页无刷新导航导致脚本重建与全局对象失效,修复方法为补回缺失方法并保留新值,同时避免连续提交导致的弹窗问题。
由 AI 生成,仅供参考
上周有读者反馈:登录页有时候点了没反应。
「有时候」是最难排查的那种词。整页打开登录页一切正常,从首页点导航进去,提交按钮就像没绑事件。
站内导航是无刷新的,点击链接只替换内容区。浏览器不会执行通过 innerHTML 插入的脚本,所以换页逻辑里必须手动把这些脚本节点重建一遍,让它们重新执行。
问题就出在重建上。页面 head 里有一段服务端注入的脚本:
window.DINO = { base: '...', csrf: '...' };
它每次换页都会重新执行,而且是整体赋值。框架挂在同一个对象上的请求封装、弹窗、提示条,在这行执行之后全部没了。
整页加载时顺序相反:先赋值,后挂载,所以没事。只有换页这条路径会踩中。
修法是换页后把缺失的方法补回去,同时保留服务端这次注入的新值。遍历旧对象,只往新对象上补不存在的键,用户信息和 CSRF 令牌都还是最新的。
修完顺手又发现一个连带问题:连续点提交会叠出多个验证弹窗。加了一个「已有弹窗就忽略」的判断。
这类坑的教训是:换页重建脚本之后,页面必须当成刚打开一样重新初始化,而运行时挂在全局上的东西,任何一处整体赋值都可能把它们冲掉。
评论(0)
登录后才能发表评论。去登录 →
还没有评论,来抢沙发吧~