js BOM

最新推荐文章于 2025-07-23 15:13:54 发布

原创最新推荐文章于 2025-07-23 15:13:54 发布 · 126 阅读

1 ·

CC 4.0 BY-SA版权

js内容专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了浏览器对象模型(BOM)的基本概念，包括其核心组件window对象及其常用方法与属性，如打开、关闭窗口，获取浏览器及屏幕尺寸等。同时探讨了location、navigator和history对象的功能。

1：什么是bom？

全称:browser   object  model;
	bom就是浏览器对象！
	简单来说，就是学习一些操作浏览器窗口的方法和属性等！

2：window对象是BOM的核心，也是BOM里面的顶级对象。

window对象也有很多内置方法（alert(1)）
	window对象既是ECMAScript规范中的Global对象，也是BOM中的顶级对象；
	document对象既是BOM对象的一个属性，也是DOM模型中的顶级核心
	location对象既是window对象的属性，同时也是dom对象的属性。

	全局变量是 window 对象的属性。
	全局函数是 window 对象的方法。
	甚至 HTML DOM 的 document 也是 window 对象的属性之一：

3: open(‘路径’，‘打开的方式’,‘设置属性’) 打开窗口

举例：
_self	当前窗口打开
_blank  新窗口打开
open('img/1.jpg','_self','width=400,height=400,top=100,left=100')

4: close() 关闭窗口
5: moveTo(x,y) 窗口移动到的位置窗口移动的尺寸 moveBy(x,y)
6: 窗口宽高尺寸 resizeTo(x,y) 窗口宽高变化尺寸 resizeBy(x,y)
7: location 对象提供了与当前窗口中加载的文档有关的信息以及一些导航功能;

location.reload( )    类似于window.go(0)   重新加载页面
location.reload(true)  类似于Ctrl+F5 刷新  清除缓存,从服务器上重新加载
location.pathname   获取文件路径
location.hostname  获取到域名
location.port   端口
location.protocol 获取?后面的内容包括?
location.hash   获取#后面的内容包括#
location.replace   打开一个新的url地址   类似于`<a href='1.html' taget='-self'></a>` 通过加载url 指定的文档来替换当前文档,这个方法是替换当前窗口页面,前后两个页面共用一个窗口,所以是没有后退返回上一页的;
location.assign   打开一个新链接   有后退功能 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

8: navigator 对象用来描述浏览器本身，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息.
9: history 对象保存着从窗口被打开起的历史记录而不是浏览器的历史记录，每个浏览器窗口、标签页、框架都有自己的 history 对象。
10: 获取浏览器的可视窗口的宽高兼容写法:(主要兼容低版本的IE 8,7,6)

   var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
    var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

11：屏幕宽高

document.write("<br />"+window.screen.height);//显示屏的高度
document.write("<br />"+window.screen.width);//显示屏的宽度
document.write("<br />"+window.screen.availHeight);//显示屏的可用高度
document.write("<br />"+window.screen.availWidth);//显示屏的可用宽度

12：获取滚动条的高

document.documentElement.scrollTop
document.body.scrollTop
兼容写法：
var sc = document.documentElement.scrollTop + document.body.scrollTop;
var sc = document.documentElement.scrollLeft + document.body.scrollLeft;

13:window.onscroll onscroll：滚动事件