本文详解如何在 Onsen UI 中正确获取导航器（）的页面栈列表及当前顶部页面，纠正常见误区，提供可直接运行的代码示例与关键注意事项。
本文详解如何在 onsen ui 中正确获取导航器（`
在 Onsen UI v1（问题所涉版本）中，<ons-navigator></ons-navigator> 组件管理着一个页面栈（page stack），用于实现页面的 push、pop、replace 等导航行为。初学者常误以为 event.target（即触发 init 事件的 <ons-page></ons-page>）本身具备 getCurrentPage() 或 getPages() 方法——但这是不正确的。这些方法实际属于 <ons-navigator></ons-navigator> 元素实例，而非单个页面。
✅ 正确做法是：先通过 DOM 获取 navigator 元素，再调用其原生属性或方法。Onsen UI v1 的 navigator 实例暴露了两个关键只读属性：
-
navigator.pages：返回当前栈中所有<ons-page></ons-page>元素组成的数组（按入栈顺序排列，索引 0 为底部，末尾为顶部）； -
navigator.topPage：直接返回栈顶（即当前显示）的<ons-page></ons-page>元素（DOM 节点），无需调用方法。
以下为修正后的完整示例（基于原始 Pen 优化）：
<script>
document.addEventListener('init', function(event) {
var page = event.target;
// ✅ 正确：获取 navigator 实例（注意：v1 中需通过 DOM 查询）
var navigatorEl = document.getElementById('myNavigator');
if (page.id === 'page1') {
page.querySelector('#push-button').onclick = function() {
navigatorEl.pushPage('page2.html', { data: { title: 'Page 2' } });
};
} else if (page.id === 'page2') {
// ✅ 在任意页面中均可安全访问 navigator 状态
var pages = navigatorEl.pages; // 获取全部页面数组
var currentPage = navigatorEl.topPage; // 获取当前顶部页面（即 page2）
console.log('Stack size:', pages.length);
console.log('Top page ID:', currentPage.id); // 输出 "page2"
console.log('All page IDs:', pages.map(p => p.id)); // ["page1", "page2"]
// 更新工具栏标题
page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
}
});
</script>
⚠️ 重要注意事项：
-
navigator.pages和navigator.topPage是属性（property），不是方法（method），因此不可加括号调用（如pages()或topPage()会报错）； - 不要尝试在
init事件处理器中对event.target调用getCurrentPage()—— 该方法在 v1 中并不存在于页面实例上（v2+ 才有类似 API）； - 若需监听栈变化（如页面 push/pop 后刷新状态），可监听
postpush、postpop等 navigator 事件，而非仅依赖init； - 使用
navigatorEl.pages.length === 1可判断是否处于栈底（即仅剩根页面），适用于控制“返回首页”按钮显隐。
掌握 pages 与 topPage 这两个核心属性，即可高效实现页面栈监控、历史回溯、多级导航状态同步等进阶功能，为构建复杂单页应用打下坚实基础。
