
在 cordova ios 项目中,页面导航不依赖原生 viewcontroller 切换,而是基于 web 技术(html + javascript)通过修改 `window.location.href` 实现单页应用式跳转,简单高效且跨平台兼容。
Cordova 是一个基于 WebView 的混合开发框架,其 iOS(及 Android)应用本质是一个嵌入了 Web 内容的原生容器。因此,页面跳转并非调用 pushViewController 或 presentViewController 等原生 iOS API,而是采用标准 Web 导航方式——即通过改变当前 WebView 的 URL 地址,加载新的 HTML 文件。
最常用、最直接的方式是为按钮绑定点击事件,并将 window.location.href 指向目标页面路径。例如,在首页 index.html 中添加一个登录按钮:
并在页面底部(或
✅ 注意事项与最佳实践:
- 路径必须为相对路径(如 "addProduct.html"),且目标文件需位于 www/ 目录下,与当前 HTML 同级或按路径正确组织;
- Cordova 不支持跨域跳转,所有页面均需托管在本地 file:// 协议下(即打包进 www 文件夹);
- 若需传递参数(如用户 ID),可使用 URL 查询字符串:
window.location.href = "detail.html?id=123&name=productA";
并在目标页用 new URL(window.location).searchParams.get('id') 解析;
- 避免在 deviceready 事件前执行 DOM 操作——建议将事件绑定逻辑包裹在 document.addEventListener('deviceready', ...) 中,确保 Cordova 环境就绪后再初始化交互;
- 如需更高级路由(如页面过渡动画、路由守卫、状态管理),推荐集成轻量级前端路由库(如 Page.js 或原生 history.pushState + popstate),但对简单跳转,window.location.href 已完全足够。
总之,Cordova 的页面导航是 Web 思维而非原生思维——忘掉 UIViewController,拥抱 HTML 文件与浏览器导航机制,这是快速上手并保持跨平台一致性的关键。










