Firefox和Opera有一个新特性,名叫“往返缓存”(back-forward cache,或bfcache),可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据,还保存了DOM和JavaScript的状态;实际上是将整个页面都保存在了内存里。如果页面位于bfcache中,那么再次打开该页面就不会触发load事件。尽管由于内存中保存了整个页面的状态,不触发load事件也不应该会导致什么问题,但为了更形象地说明bfcache的行为,Firefox还是提供了一些新事件。
第一个事件就是pageshow,这个事件在页面显示时触发,无论页面是否来自bfcache。在重新加载页面中,pageshow会在load事件触发后触发;而对于bfcache中的页面,pageshow会在页面状态完全恢复的那一刻触发。另外要注意的是,虽然这个事件的目标是document,但必须将其事件处理程序添加到window。来看下面的例子:
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
};
(function () {
var showCount = 0;
EventUtil.addHandler(window, "load", function () {
alert("Load fired");
});
EventUtil.addHandler(window, "pageshow", function (event) {
showCount++;
alert("Show has been fired " + showCount + " times.");
});
})();
这个例子使用了私有作用域,以防止变量showCount进入全局作用域。当页面首次加载完成时,showCount的值为0。此后,每当触发pageshow事件,showCount的值就会递增并通过警告框显示出来。如果你在离开包含以上代码的页面之后,又单击“后退”按钮返回该页面,就会看到showCount每次递增的值。这是因为该变量的状态,乃至整个页面的状态,都保存在了内存中,当你返回这个页面时,它们的状态得到了恢复。如果你单击了浏览器的“刷新”按钮,那么showCount的值会被重置为0,因为页面已经完全重新加载了。
除了通常的属性之外,pageshow事件的event对象还包含一个名为persisted的布尔值属性。如果页面中保存在了bfcache中,则这个属性的值为true;否则,这个属性的值为false。可以像下面这样在事件处理程序中检测这个属性:
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
};
(function () {
var showCount = 0;
EventUtil.addHandler(window, "load", function () {
alert("Load fired");
});
EventUtil.addHandler(window, "pageshow", function (event) {
showCount++;
alert("Show has been fired " + showCount + " times.Persisted? " + event.persisted);
});
})();
通过检测persisted属性,就可以根据页面在bfcache中的状态来确定是否需要采取其它操作。
与pageshow事件对应的是pagehide事件,该事件会在浏览器卸载页面的时候触发,而且是在unload事件之前触发。与pageshow事件一样,pagehide在document上面触发,但其事件处理程序必须要添加到Windows对象。这个事件的event对象也包含persisted属性,不过其用途稍有不同,来看下面的例子:
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
};
EventUtil.addHandler(window, "pagehide", function (event) {
alert("Hiding. Persisted? " + event.persisted);
});
有时候,可能需要在pagehide事件触发时根据persisted的值采取不同的操作。对于pageshow事件,如果页面是从bfcache中加载的,那么persisted的值就是true;对于pagehide事件,如果页面在加载之后会保存在bfcache中,那么persisted的值也会被设置为ture。因此,当第一次触发pageshow时,persisted的值一定是false,而在第一次触发pagehide时,persisted就会变成true(除非页面不会保存在bfcache中)。
指定了onunload事件处理程序的页面会被自动排除在bfcache之外,即使事件处理程序是空的。原因在于,onunload最常用于撤销在onload中所执行的操作,而跳过onload后再次显示页面很可能会导致页面不正常。
分享到:
相关推荐
pageshow 事件在页面显示时触发,而 pagehide 事件在页面隐藏时触发。通过监听这些事件,我们可以检测用户是否点击了返回按钮,并在必要时重新加载页面。 代码实现 下面是一个使用 pageshow 和 pagehide 事件来...
页面生命周期事件主要与页面加载、初始化、显示和隐藏等过程相关,而用户交互事件则涉及用户与页面元素的互动。 1. 页面生命周期事件: - `pageinit`:当页面首次被加载或通过导航机制插入到DOM(文档对象模型)中...
- **页面隐藏与显示事件**:页面隐藏(`pagehide`)和页面显示(`pageshow`)事件的应用场景及其作用。 2. **对话框与导航**: - **对话框**:使用对话框进行模态交互的方法,增强用户体验。 - **导航和历史记录**:...
- `pageshow` 和 `pagehide`:页面显示和隐藏时触发,可用于执行页面间的逻辑。 - `vclick`:模拟桌面的click事件,对触屏设备友好,避免延迟问题。 5. **最佳实践**: - **延迟绑定**:使用`pagecreate`或`...
12. **pagehide**:过渡动画完成后,在源页面触发,用于释放资源或隐藏元素。 13. **pageinit**:页面初始化完成并进行了增强时触发,是开始处理页面逻辑的标志。 14. **pageload**:页面成功加载并插入 DOM 后...
**2.5 页面隐藏与显示事件** 除了 `pageinit` 事件外,jQuery Mobile 还提供了 `pageshow` 和 `pagehide` 事件。这些事件分别在页面显示和隐藏时触发,可以用来处理页面状态的更新或清理工作。 **2.6 对话框** ...
jQuery Mobile 引入了特殊的页面生命周期事件,如 `pageinit`、`pageshow` 和 `pagehide`,用于在页面加载和显示时执行特定的代码。 - **页面初始化(Page Initialization)**: `pageinit` 事件在页面首次加载或...
// 页面隐藏时的事件处理 window.addEventListener('pagehide', function () { // 将isPageHide设置为true,表示页面已经进入隐藏状态 isPageHide = true; }); }); ``` 这段代码的工作原理是,当页面从后台...
3. **页面隐藏与显示事件**: - 页面在加载前后会触发 `pagebeforecreate`、`pageshow`、`pagehide` 等事件,可用于执行页面特定的操作。 4. **对话框**: - 可以将页面转换为模态对话框,用于呈现临时信息或进行...
jQuery Mobile 提供了一系列页面事件,如 `pagecreate`(页面创建)、`pageshow`(页面显示)和 `pagehide`(页面隐藏),这些事件可以帮助开发者更好地控制页面的行为。 ##### 3. **对话框** jQuery Mobile 支持...
5. 页(Pages):基于单一页面架构,通过隐藏和显示内容实现多页面效果。 6. 布局(Layouts):如分页器(pager)、可折叠集(collapsible sets)和面板(panels)等,用于构建复杂的页面结构。 7. 动画...
1. **页面事件**:如 `pageinit`(页面初始化)、`pageshow`(页面显示)和 `pagehide`(页面隐藏),用于在页面生命周期中的不同阶段添加逻辑。 2. **触发动画**:`$.mobile.changePage()` 和 `$.mobile.loadPage...