浏览器的window对象本身就提供了我们很多的对浏览器本身属性的获取或设置的方法,但是我们也知道,由于各大浏览器之间对标准的实现不统一,导致很多方法功能上有所出入,mootools为我们统一了我们最常用的一些方法:
mootools的Window.Base.js里面,主要实现了对DOM树创建完成的事件监听。以前,我们可能经常把javascript代码写在html代码的最后面获者加上defer属性,以保证javascript代码要操作的html先于javascript代码装载(如果不是这样的话,javascript将获取不到目标元素而出错),但是,这种方式看起来还是太杂乱,保险系数也不是最高的。其实像ie的话可以根据document的readyState属性来判断文档树的建立状态,而有些浏览器在创建文档树之后会触发onload事件,mootools把这些都包装了起来,形成一个统一的自定义事件"domready",你可以像添加其他监听器一样来为window添加这个domready事件的监听器方法:
window.addEvent(
'
domready
'
, function()
...
{
alert('the dom is ready');
} );
另外,有个快捷方法,效果和以上相同:
window.onDomReady(function(e)
...
{
alert('dom is ready!!!');
}
);
mootools的Window.Base.js里面,主要实现了对DOM树创建完成的事件监听。以前,我们可能经常把javascript代码写在html代码的最后面获者加上defer属性,以保证javascript代码要操作的html先于javascript代码装载(如果不是这样的话,javascript将获取不到目标元素而出错),但是,这种方式看起来还是太杂乱,保险系数也不是最高的。其实像ie的话可以根据document的readyState属性来判断文档树的建立状态,而有些浏览器在创建文档树之后会触发onload事件,mootools把这些都包装了起来,形成一个统一的自定义事件"domready",你可以像添加其他监听器一样来为window添加这个domready事件的监听器方法:
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
alert('the dom is ready');
} );
另外,有个快捷方法,效果和以上相同:
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
mootools的Window.Size.js中呢,提供了一系列和浏览器window的尺寸有关的工具方法,
window的扩展方法:
方法: getWidth - 获取window的当前高度(不包含滚动条的滚动量,即当前能见视野高度)
方法:getHeight - 获取window的当前宽度(不包含滚动条的滚动量,即当前能见视野宽度)
方法:getScrollWidth - 获取window的当前高度(包含了整个内容区域,即可滚动部分也计算在内)
方法:getScrollHeight - 获取window的当前宽度(包含了整个内容区域,即可滚动部分也计算在内)
方法:getScrollLeft - 获取window滚动的水平偏移量
方法:getScrollTop - 获取window滚动的垂直偏移量
方法:getSize - 获取window上面几个方法的提供的数据,格式:
{
'size': {'x': this.getWidth(), 'y': this.getHeight()},
'scrollSize': {'x': this.getScrollWidth(), 'y': this.getScrollHeight()},
'scroll': {'x': this.getScrollLeft(), 'y': this.getScrollTop()}
}