Chrome 65更新后Sencha Touch应用导航异常问题求助

DevOps 小满

2026-5-20

解决Chrome 65下Sencha Touch应用导航异常的问题

我之前也碰到过一模一样的情况！Chrome 65对DOM操作和History API的处理做了不少调整，刚好踩中了Sencha Touch旧版本的兼容性坑，尤其是导航视图的逻辑。给你几个亲测有效的解决方案：

优先升级Sencha Touch版本
如果你用的是2.4.x及更早的版本，赶紧升级到官方针对Chrome 65修复后的稳定版（比如2.4.2的补丁版本）。当时Sencha官方专门修复了Chrome 65对history.pushState的新限制，以及DOM节点渲染时序变化导致的导航失效问题。
手动调整导航执行时机
如果暂时没法升级框架，可以尝试给导航操作加个小延迟，确保DOM完全渲染后再执行。比如把push/pop方法用Ext.defer包裹：
```
// 示例：延迟执行页面跳转
Ext.defer(function() {
    this.getNavigationView().push({
        xtype: 'your-target-view'
    });
}, 100, this); // 100ms延迟可根据实际情况调整
```
另外也可以重写导航视图的onPush方法，调整内部DOM操作的顺序，避免Chrome 65的时序问题。
检查History API的调用时机
Chrome 65对history.replaceState和pushState的调用时机有更严格的限制，旧版Sencha Touch可能在DOM未完全就绪时就调用这些API，导致页面状态异常。可以把应用初始化逻辑放在Ext.onReady里确保DOM就绪：
```
Ext.application({
    name: 'MyApp',
    launch: function() {
        Ext.onReady(function() {
            // 原来的初始化代码放在这里
            Ext.Viewport.add({ xtype: 'mainview' });
        });
    }
});
```
临时禁用Chrome新特性（仅调试用）
作为调试验证的手段，可以启动Chrome时添加参数--disable-features=NavigationPreload，看看是否能恢复导航功能。这个方法只适合本地调试，千万别在生产环境用哦。