onpageshow 事件
onpageshow 事件在用户浏览网页时触发。
onpageshow (支持的 HTML 标签: <body>)事件类似于 [onload]事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。
为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false (查看以下 "更多实例" )。
function myFunction(event) {
alert("该页面是否从浏览器缓存中读取? " + event.persisted);
}
DOMContentLoaded 事件
DOMContentLoaded不同的浏览器对其支持不同，所以在实现的时候我们需要做不同浏览器的兼容。
1）支持DOMContentLoaded事件的，就使用DOMContentLoaded事件；
2）IE6、IE7不支持DOMContentLoaded，但它支持onreadystatechange事件，该事件的目的是提供与文档或元素的加载状态有关的信息。
- 更低的ie还有个特有的方法doScroll， 通过间隔调用document.documentElement.doScroll("left");可以检测DOM是否加载完成。 当页面未加载完成时，该方法会报错，直到doScroll不再报错时，就代表DOM加载完成了。该方法更接近DOMContentLoaded的实现。
function ready(fn){
if(document.addEventListener) {
document.addEventListener('DOMContentLoaded', function() {
document.removeEventListener('DOMContentLoaded',arguments.callee, false);
fn();
}, false);
}
// 如果IE
else if(document.attachEvent) {
// 确保当页面是在iframe中加载时，事件依旧会被安全触发
document.attachEvent('onreadystatechange', function() {
if(document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
fn();
}
});
// 如果是IE且页面不在iframe中时，轮询调用doScroll 方法检测DOM是否加载完毕
if(document.documentElement.doScroll && typeof window.frameElement === "undefined") {
try{
document.documentElement.doScroll('left');
}
catch(error){
return setTimeout(arguments.callee, 20);
};
fn();
}
}
};
getBoundingClientRect
可以通过document.documentElement.getBoundingClientRect.width来获取设备宽度.(flexible.js插件就是这么做的)
1、getBoundingClientRect的作用
getBoundingClientRect用于获取某个html元素相对于视窗的位置集合。
执行 object.getBoundingClientRect();会得到元素的top、right、bottom、left、width、height属性，这些属性以一个对象的方式返回。
2.getBoundingClientRect上下左右属性值解释
主要是left和bottom要解释一下，left是指右边到页面最左边的距离，bottom是指底边到页面顶边的距离。
- 浏览器兼容性
ie5以上都能支持，但是又一点点地方需要修正一下，
IE67的left、top会少2px,并且没有width、height属性。
document.readyState
一个[document]的 **Document.readyState **属性描述了文档的加载状态。
一个文档的 readyState 可以是以下之一：
loading / 加载
document 仍在加载。
interactive / 互动
文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
complete / 完成
T文档和所有子资源已完成加载。状态表示 load 事件即将被触发。
当这个属性的值变化时，document 对象上的readystatechange 事件将被触发。
// 模拟 DOMContentLoaded/ jquery ready
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
initApplication();
}
}
// 模拟 load/onload 事件
document.onreadystatechange = function () {
if (document.readyState === "complete") {
initApplication();
}
}
网友评论