浏览器提供了大量的对象,用于表示页面上HTML所对应的元素。通常将它们的集合称为浏览器对象模型(BOM)。BOM在很大程度上依赖于我们所使用的是何种类型的浏览器以及浏览器的版本,如果不慎选择经常会出现兼容性问题。不过如果我们的代码能够遵循W3C标准,就能更大限度的兼容不同的浏览器。
浏览器对象在最顶层的是window对象,代表了浏览器的框架以及浏览器相关的一切,web页面就加载在这个框架之中,甚至可以通过它查看用户的历史记录。而document对象则代表了页面本身。window对象是一个全局对象,因此可以直接使用全局对象的属性或者方法。
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
history对象保存了用户所访问过的页面信息
我们可以通过历史记录的历史栈来单击浏览器的前进和后退键来返回访问过的页面。主要的函数为back(),forward()以及go()函数来操作页面的转换。
如例在页面上创建后退按钮:
<html>
<head>
<script>
function goBack()
{
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>
location对象包含了用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 (80 或 443)
- location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.href 属性返回当前页面的 URL。还可以通过此来改变当前的URL或者是刷新当前的网页信息。
window.screen 对象包含有关用户屏幕的信息。
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度